以下是自己的一些“结论”,不知道是否正确,请大家指正:viewport<meta name="viewport" content="width=400,initial-scale=1">
p { width:50% }横屏幕时,p的width值为240,竖屏幕时,p的width值为200。初步结论为,如果设置的viewport width通过initial-scale还不能达到屏幕尺寸,则viewport width取屏幕尺寸的值。上面因为横屏幕的时候400还是小于480的,而缩放设置为1,不能拉伸了,所以最后取了480,为验证,我们再,<meta name="viewport" content="width=500,initial-scale=1">
p { width:50% }横屏幕时,p的width值为250,竖屏幕时,p的width值也250。这说明横竖的时候设置的viewport值都超过屏寸,所以最后取设置的值为实际的viewport。显式设置viewport width,但不设置initial-scale值的时候,这个属性非常有用,当我们设置的viewport值小于屏寸的时候,它可以拉伸来解决问题,所以又不一定要取屏寸来作为viewport,如:<meta name="viewport" content="width=200">
p { width:50% }横屏幕时,p的width值为100,竖屏幕时,p的width值也100。这说明width为200的时候,虽然竖屏屏寸为320,但通过initial-scale放大充满了屏寸也可以满足viewport的需要,横屏也是一样。唯一不好的地方就是放大了字体,而且这个放大值不是我们自己设置的,不好控制。不显式设置viewport width,也不设置initial-scale的时候,如果不显示设置,貌似默认的viewport无论是横屏幕,还是竖屏,这个值都是980px,如<meta name="viewport" content="">
p { width:50% }
横屏幕时,p的width值为490,竖屏幕时,p的width值也490。初步说明以上结论正确。仅设置initial-scale的时候,
<meta name="viewport" content="initial-scale=0.5">
p { width:50% }横屏幕时,p的width值为480,竖屏幕时,p的width值也320。额,这个值一出现的时候,吓到我了,因为这么说竖屏幕时viewport的值至少是640再推断只能是屏寸去除0.5才会达到这个值,这个结论不敢下,于是再,
<meta name="viewport" content="initial-scale=2">
p { width:50% }如果竖屏幕时,p的width值为320/2/2=80,则说明结论基本正确。。结果实验后,确实如此,竖时为80,横时为480/2/2=120。所以,如果不显式设置viewport,仅设置initial-scale,那么viewport的值是等于屏寸除以viewport的值,不知道对不对?先这样吧。注:initial-scale的值最多只能设到5,因为设置6,8,10乃至30的p width都和设置5的时候一样。