手机浏览器适配

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

手机浏览器适配meta做手机网页经常会看到这样的一句代码

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

width=device-width 设置视图的宽度等于设备屏幕的宽度initial-scale=1 设置初始缩放比例为1minimum-scale=1 设置最小的缩放比例为1maximum-scale=1 设置最大的缩放比例为1user-scalable=no 不允许缩放做一个简单粗暴的变换

<meta name="viewport" content="width=320, maximum-scale=1.3, user-scalable=no">将视图的宽度设为320,最大缩放比设为1.3,不设置初始缩放比。这样可以将整个视图进行缩放

rem字体单位px 无继承,常用em 继承,相对于父元素继承rem 继承,相对于root继承,一般为html,为CSS3属性,支持IE9+及其他现代浏览器vh 1vh=视窗高度/100,为css3属性,支持IE9+,Chrome20+,Firefox19+,safari6+,android browser4.4+vw 1vw=视窗宽度/100

利用rem通过js来计算根元素的font-size,从而适应各种屏幕

利用vhvh本来就是视窗高度的,根据不同的屏幕的视窗高度来适应

p.s.果然我还是不会写博客

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航