Geek Answers Handbook

Proper use of the mobile viewport on different devices with a small width

I have a css code like this for mobile devices:

@media all and (min-width: 0px) and (max-width: 991px) {...}

and I have this 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 first open my website: on most devices I need to scale my browser to fit it.

Is it possible to automatically install the device? for example, if the width of the device is 340: I have to scale it a little (because the website has a large size for 340 pixels (that's s min.640px)) ... If 900: then the scale too ...

even ipad (in portrait mode, as the width is 768 pixels).

can it be done?

plunker:

https://plnkr.co/edit/5KhIlmtLkWhtROs7y188?p=preview

and demo:

enter image description here

Why do I have a scrollbar? I need to zoom out somehow, so that I won’t have a scrollbar ... and my container should be 640px and no other values ​​for mobile devices ...

+8
javascript html css mobile media-queries
source share
4 answers

This is what I use for all my sensitive web applications.

 <meta name="viewport" content="width=device-width, initial-scale=1">
+1
source share

Use the HTML5 scaling property as shown below. This will increase the body scale to + or -. You can use any value.

 <body style="zoom:50%;">
+2
source share

You can use HTML5 scale:

 body { -moz-transform: scale(0.8, 0.8); /* Moz-browsers */ zoom: 0.8; /* Other non-webkit browsers */ zoom: 80%; /* Webkit browsers */ }

See http://www.browsersupport.net/CSS/zoom for supported browsers.

So you can write a JS function to select the correct image size.

+1
source share

Try

 Zoom:0.5;

Without using the% value Or set

 <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1" />
+1
source share

More articles:


All Articles