I integrated Angular Universal with my existing Angular 10 web app to generate a pre-rendered version for SEO purposes. I detect when a user views the web app in landscape mode(using media query) on his mobile / tablet device and display a message : "Please rotate your device, We do not support landscape mode, Please use the app in portrait mode for best experience". This works fine with the regular build. But with pre-rendered build it is displaying the message for all devices, even in portrait mode and also for desktops, which it should not. I'm not sure why this is happening.
The pre-rendered build works fine when I serve the dist folder locally and check in localhost. But when I host it on a server, it starts displaying the message for all devices.
app.component.html
<div id="container">
<router-outlet></router-outlet>
</div>
<div id="turn">
<div class="landscapeMesBlock">
<p class="landscapeMes">
Please rotate your device, <span class="landscapeMesInner">We do not support landscape mode, Please use the app
in portrait mode for best
experience</span>
</p>
</div>
</div>
CSS / Media queries
@media screen and (min-width: 481px) and (max-width: 851px) and (orientation: landscape) {
/* Styles */
#turn {
display: block !important;
}
#container {
display: none;
}
}
#turn {
display: none;
}
@media only screen and (max-width: 800px) and (min-width: 768px) {
.sort_apply_bttn {
text-align: center;
max-width: 460px !important;
margin: 0 auto !important;
padding: 0px;
}
#turn {
display: none !important;
}
#container {
display: block;
}
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://maps.googleapis.com https://maps.gstatic.com; object-src 'self';">
<link rel="preload" href="/assets/fonts/aktivgroteskw06-mediumregular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/aktivgroteskw06-lightregular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/aktivgroteskw04-thinregular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/aktivgroteskw06-regularRg.woff2" as="font" type="font/woff2" crossorigin>
<!-- <meta http-equiv="ScreenOrientation" content="autoRotate:disabled"> -->
<!-- loader style -->
<style>
.loader_section_block {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.loader_section {
border-radius: 5px;
width: 90px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #efefef;
}
.loader_section img {
width: 60px;
margin-top: -13px;
height: 60px;
}
.loader_section p {
font-size: 12px;
font-family: sans-serif !important;
margin: 0px;
text-align: center;
margin-top: -9px;
}
</style>
</head>
<body>
<app-root>
<div class="loader_section_block">
<section class="loader_section">
<div class="medium_regular_font d-flex flex-column align-items-center">
<img loading="lazy" src="assets/images/Test-Loader.gif" alt="loading">
<p class="mb-0 text-center">Loading...</p>
</div>
</section>
</div>
</app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script src="https://maps.googleapis.com/maps/api/js?key=****"
type="text/javascript" async defer></script>
</body>
</html>
No error messages in console
I think you need to restart your server which the angular app running on. I faced a similar issue of update two weeks ago, it was working as expected locally but not on the server, and it has been fixed just after restarting pm2 and configuring pm2 again.
ps: angular universal does not have the notion of window and screen because it is a server, not a browser, that is why the width control is ignored.