用CSS做iOS和Android样式适配

html-css044

用CSS做iOS和Android样式适配,第1张

在移动端webview渲染的时候，html标签会被自动加入一个class属性，会标识不同的设备

如：

所以，可以用来适配一些移动双端的差异场景，如适配不同高度Titlebar

不同样式：

使用样式：

在iOS设备上就会展示80px，Android设备上60px

input框去阴影

不要给input加高度，加padding撑开

iOS10后Safari不再识别这个meta标签。所以得用js来hack一下：

禁用双指缩放：

禁用手指双击缩放：

1、一种是dom结构复杂2、另外一种是加载了过多的css样式，3、前者好解决，后者的话如果用了mui.css就比较麻烦了3、现在是尽量少用mui.css，要用到一些mui的控件时，就把依赖的样式从css中拷贝出来4、建议官方把css拆成 base.css+各种控件.css，后来我发现还真不好拆，前期没设计好，后期越来越臃肿。