Menu
I have such css code for mobile devices:
@media all and (min-width: 0px) and (max-width: 991px) {...}
and i have such html:
<meta name="viewport" content="width=1024, initial-scale=1" id="viewportMt">
<script>
window.onload = function () {
if(screen.width < 970) {
var vp = document.getElementById('viewportMt');
vp.setAttribute('content','width=640, initial-scale=1');
}
}
</script>
the main problem, is that when i firstly open my website: on most of devices i have to scale my browser view to fit it...
is it possible to fit device automatically? for example if device width is 340: i should scale it out a little bit (because website is to big for 340px (it;s min.640px))... If 900: then scale too...
even ipad (in portrait mode, because it's width is 768px).
is it possible to do?
plunker:
https://plnkr.co/edit/5KhIlmtLkWhtROs7y188?p=preview
and demo:
why i have there scrollbar? i need somehow to zoom it out, so that i will not have any scrollbar there... and my container should be 640px and no other values for mobile devices...
766
Bootstrap primarily uses these media query ranges to create sensible breakpoints. will be applied to only the devices whose viewport width is minimum 576 px wide and not be more than 767 px. The same logic applies for medium, large, extra large devices respectively.
Mobile (Smartphone) max-width: 480px. Low Resolution Tablets and ipads max-width: 767px. Tablets Ipads portrait mode max-width:1024px.
Setting The ViewportThe width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
16:9 is most popular aspect ratio, due to its considerable width, this format is considered panoramic. In other words, it captures a wider area than other aspect ratios.
Use the HTML5 zoom property as seen below. This will zoom the body to + or -. Any value can be used.
<body style="zoom:50%;">
This is what I use for all my responsive web apps.
<meta name="viewport" content="width=device-width, initial-scale=1">
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
