移动端布局常见问题汇总

横竖屏限制问题

<meta name = "x5-orientation" content="portrait | landscape" />

只支持x5内核

<meta name = "screen-orientation" content="portrait" />

只支持UC浏览器

全屏限制问题

<meta name = "x5-fullscreen" content="true" />

只支持x5内核

<meta name = "full-screen" content="yes" />

只支持UC浏览器

禁止识别电话号码和邮箱

<meta name = "format-detection" content="telephone=no,email=no"
4000
/>

禁止识别之后，页面当中所有的邮箱和电话将不会识别，如果有特殊需求，要配合一下代码实现

<a href="tel:110">请拨打110</a>
<a href="mailto:qq@.com">请发送邮件qq@.com</a>

消除链接\表单\按钮默认背景

-webkit-tap-highlight-color: rgba(0,0,0,0);

消除按钮圆角

-webkit-appearance: none;

移动端字体

iOS系统

默认中文字体是 Heiti SC

默认英文字体是 Helvetica

默认数字字体是 HelveticaNeue

无微软雅黑字体

Android系统

默认中文字体是 Droidsansfallback

默认英文和数字字体 Droid Sans

无微软雅黑字体

winphone 系统

默认中文字体是 Dengxian(方正等线体)

默认英文和数字字体是 Segoe

无微软雅黑字体

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑

如无特殊需求，手机端无需定义中文字体，使用系统默认

英文字体和数字字体可以使用 Helvetica,三种系统都支持

body{font-family:Helvetica;}

禁止用户设置字体大小

-webkir-text-size-adjust:100%;

禁止复制、文字选中

-webkit-user-select:none;//安卓不支持

字体增强 font boosting

移动端设备为了使用户能看清楚大批量的字体，会自动对字体进行放大，但是只要指定了容器的高度，就能解决

p{max-height:999999px}

调用原生滚动事件

-webkit-overflow-scrolling:touch;

CSS 动画页面闪白，动画卡顿

解决办法：

- 尽可能地使用合成属性transform和opacity来设计CSS3动画，不适用position的left和top来定位

- 使用CSS3 动画的时候尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility隐藏

-webkit-transform: tanslate3d(0,0,0);

fixed 定位缺陷

iOS 下 fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位

Android下 fixed 表现要比iOS好，软键盘弹出时，不会影响fixed元素定位

iOS下不支持position:fixed

解决方案 ：可以用iScroll插件解决这个问题

阻止旋转屏幕是自动调整字体大小

-webkir-text-size-adjust:100%;

上下拉动滚动条时卡顿

body{-webkit-overflow-scrolling:touch;overflow-scrolling-touch;}