By default in my app I have two resolutions (width):
1024px+ & 520px
and I have such viewport:
<meta name="viewport" content="width=520, initial-scale=0.5" id="vwPrt">
<script>
window.onload = function () {
if(screen.width > 521) {
var vpEl = document.getElementById('vwPrt');
vpEl.setAttribute('content','width=520, initial-scale=1');
}
if(screen.width > 970) {
var vpEl = document.getElementById('vwPrt');
vpEl.setAttribute('content','width=1024, initial-scale=1');
}
}
</script>
and css:
...
@media all and (min-width:0px) and (max-width:520px){...}
...
and sometimes on iOS devices, I first see css styles for a big resolution (1024px+), and only after scaling, or reloading page, do I get 520px for iPad and iPhone (in portrait mode).
What am I doing wrong?
How can I detect width on the fly and apply it directly without the blinking screen when in desktop mode?
By default in my app I have two resolutions (width):
1024px+ & 520px
and I have such viewport:
<meta name="viewport" content="width=520, initial-scale=0.5" id="vwPrt">
<script>
window.onload = function () {
if(screen.width > 521) {
var vpEl = document.getElementById('vwPrt');
vpEl.setAttribute('content','width=520, initial-scale=1');
}
if(screen.width > 970) {
var vpEl = document.getElementById('vwPrt');
vpEl.setAttribute('content','width=1024, initial-scale=1');
}
}
</script>
and css:
...
@media all and (min-width:0px) and (max-width:520px){...}
...
and sometimes on iOS devices, I first see css styles for a big resolution (1024px+), and only after scaling, or reloading page, do I get 520px for iPad and iPhone (in portrait mode).
What am I doing wrong?
How can I detect width on the fly and apply it directly without the blinking screen when in desktop mode?
Share Improve this question edited Feb 21, 2016 at 21:33 zer00ne 44k6 gold badges45 silver badges75 bronze badges asked Feb 18, 2016 at 7:29 byCoderbyCoder 9,18427 gold badges119 silver badges259 bronze badges 3-
Is there a good reason for specifying the width and not using
width=device-widthso that the device can adapt the layout viewport? – denmch Commented Feb 20, 2016 at 17:13 - @denmch i have min width 640px - and if device width is 540px - it will scroll - it's a bad idea – byCoder Commented Feb 20, 2016 at 19:20
- @brabertaser1992 why don't you just redirect the page after you get the screen size? – Vixed Commented Feb 27, 2016 at 10:41
5 Answers
Reset to default 8 +25I would remend a much easier way. It is possible to link towards a separate CSS file depending on the media query.
What you have to do is the following:
<link rel='stylesheet' media='all and (min-width: 0px) and (max-width: 520px)' href='css/small_devices.css' />
<link rel='stylesheet' media='all and (min-width: 520px) and (max-width: 970px)' href='css/medium_devices.css' />
<link rel='stylesheet' media='all and (min-width: 970px)' href='css/large_devices.css' />
In that case you can also split the content very easily and everything bees better readable due to the fact that you keep the media queries separated.
You have to put these link inside the <head> of your document. Doing this will also ensure that this loaded before the content is showed.
Use bootstrap with mobile first solutions. No need to track resolutions per JavaScript or write a whole bunch of mediaqueries.
From MDN:
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
To make your script fire before everything has loaded, you should be able to do this, without window.onload():
if (screen.width > 521) {
document.getElementById("viewport").setAttribute("content", "width=520; initial-scale=0.5");
}
if (screen.width > 970) {
document.getElementById("viewport").setAttribute("content", "width=1024; initial-scale=0.5");
}
Mayby you can test with the "orientation" in your CSS
@media all and (orientation:portrait) and (min-width:0px) and (max-width:520px){...}
I don't see any reason to wait for window.onload as that would very likely cause a flash of unwanted content. Your code will also set the value twice for screens larger than 970px - which is just unnecessary. You can just write the meta tag like this for the most performant and immediate results. I would put this as high up in your HEAD as possible, ideally before any styles or other scripts:
<script>
var width = 'device-width';
if(screen.width > 521) {
width = '520';
}
if(screen.width > 970) {
width = '1024';
}
document.write('<meta name="viewport" content="width=' + width + ', initial-scale=0.5" id="vwPrt">');
</script>