Geek Answers Handbook

Meta viewport and width = device width and percentages

I try to make sure that I understand how the Meta viewport tag works when setting width = device-width.

Would it be a correct statement that when working on a mobile device using <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">Use Pixel Units (or should it) be processed as if they were set on a grid of 320 pixels wide? that is, an element with a width of 160 pixels will occupy (160/320 = 50%) of the screen?

This behavior does not work when working in the desktop browser, therefore, assuming that I want to get the same design on mobile and desktop computers, should / can I use either percent or units vw/vh?

+4
source share
2 answers

The first thing to understand is that CSS pixels and device pixels are not the same thing. The number of pixels when you set something in width: 160pxin CSS refers to CSS pixels that have very little to do with the actual pixels of the device.

( ) "" , , , . 800-1000 (, iPhone 880px). , - , ..

meta viewport width=device-width, , , " ".

CSS, , , . iPhone' 320 . iOS CSS--- , 640 , CSS - 320. - 300 500 .

, CSS, , , . 50% 50% , CSS .

+3

:

maximum-scale=1, user-scalable=no

, , - . , , ?

- , : http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

( ):

. -, (, , -), maximum-scale=1 . , -, , : ( , ), .. .

User- =

, , maximum-scale. (, - ), JavaScript, , . , , -, , , , strong > .

: - ( , 960 ) ,

<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">

, 300px 400px , , - - 300 . .

0

More articles:


All Articles