web移动端小tip，boxflex

1,移动端页面

最重要的标签&＃xff1a;

在多数ios和android设备的浏览器都支持viewport meta元素覆盖默认的画布缩放设置。在标签中插入meta标签&＃xff0c;设置相应属性即可&＃xff0c;如上代码&＃xff0c;name&＃61;”viewport” content中width&＃61;device-width表示浏览器页面宽度等于设备宽度&＃xff08;同理可以设置高度&＃xff0c;也可指定具体值&＃xff09;&＃xff0c;initial- scale&＃61;1表示页面不缩放保持&＃xff0c;mininum-scale&＃61;1和maximum-scale&＃61;1表示允许用户最小缩小至原大小和扩大到原大小&＃xff08;实际 就是不让缩放^^&＃xff09;&＃xff0c;user-scaleable&＃61;no 表示禁止缩放, target- densitydpi &＃61; high-dpi表示适配高分辨率的屏幕&＃xff0c;还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi&＃xff0c;后面的四个定性&＃xff0c;第一个定量&＃xff0c;即dpi_value是DPI值&＃xff0c;device-dpi是使用设备原本的 dpi 作为目标 dp&＃xff0c;不发生默认缩放&＃xff0c;而后面的三个是指dpi取值在一定范围的表示。

2,css3新增样式

强大的CSS属性box-flex

display:-webkit-box;

效果是这样的&＃xff0c;在浏览器里是居中的&＃xff0c;由于图片颜色问题这里显示不够清楚。

示例2

页面就是这个样子的~

-webkit-text-size-adjust:none;

做项目的时候发现一个问题&＃xff0c;就是当竖屏的屏的时候显示效果不错&＃xff0c;但是当横屏的时候&＃xff0c;字体 会变大&＃xff0c;无论你怎么设置字体大小都无效&＃xff0c;后来才知道是text-size-adjust在作怪。浏览器默认会根据当前屏幕和内容作调整&＃xff0c;在webkit内核的浏览器中只需 要-webkit-text-size-adjust:none就禁止自动调整&＃xff0c;至于是否全局活局部使用看自己的项目需求&＃xff08;废话&＃64;-&＃64;&＃xff09;。