Menu
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?
222
HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
HTML is perhaps one of the easiest front-end programming languages to master. So if you want to learn HTML, then go for it! With patience and practice, you'll learn to make the most of this popular language.
HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it!
HTML is not a programming language. It's a markup language. In fact, that is the technology's name: HyperText Markup Language.
I would recommend 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 becomes 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.
56
Use bootstrap with mobile first solutions. No need to track resolutions per JavaScript or write a whole bunch of mediaqueries.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
