你的位置:首页 > 软件开发 > 网页设计 > html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

发布时间:2015-12-25 09:00:06
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结.网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿...我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML ...

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结.

网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿...

我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够。 

 

今天就研究一下各大互联网公司对于移动端页面的处理方式。

  • 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp
  • 主要研究点:viewport的设置,字体的设置,图片原始宽高设置

汝甚吊,令尊知否?


 咦?target-densitydpi呢?

网上有老复杂的计算,针对不同的屏幕分辨率,通过公式计算出不同结果再用JS输出到viewport上,各种云云, 我只想说:汝甚吊,令尊知否

 

google现在也已经不建议使用target-densitydpi这一属性,webkit中已移除了,请看这里

 

http://trac.webkit.org/changeset/119527

 

现代移动端网站的最佳实践


 

 我看了BAT的移动端页面中,现在是没有target-densitydpi这个东西了。

最佳实践:

1、在viewport中将width设置为device-width, 如:

 

<meta name="viewport" content="width=device-width">

原标题:html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。