移动端布局常见问题

移动端布局常见问题

1 横竖屏限制问题

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

只支持x5内核，指的是强制进行横屏或竖屏，portrait是竖屏，landscape是横屏。

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

只支持uc浏览器，指UC浏览器强制竖屏。

2 全屏限制问题

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

只支持x5内核，只QQ应用模式，强制全屏。

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

只支持uc浏览器，指UC强制全屏。

3 禁止识别电话号码和邮箱

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

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

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

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

.box{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

对表单、链接、按钮的默认背景设置成全透明，从而进行该样式的消除。

5 消除按钮圆角

.box{
  -webkit-appearance: none;
}

在应用开发中，经常会遇到ios端和安卓端的样式显示不一样，例如同一按钮(样式一样)会显示不一样的颜色，导致项目整体的搭配不是很好。利用-webkit-appearance: none，就可以去除浏览器默认样式。

6 移动端字体

• ios系统
  • 默认中文字体是Heiti SC
  • 默认英文字体是Helvetica
  • 默认数字字体是HelveticaNeue
  • 无微软雅黑字体
• android 系统
  • 默认中文字体是Droidsansfallback
  • 默认英文和数字字体是Droid Sans
  • 无微软雅黑字体
• winphone 系统
  • 默认中文字体是Dengxian(方正等线体)
  • 默认英文和数字字体是Segoe
  • 无微软雅黑字体
• 结论
  • 各个手机系统有自己的默认字体，且都不支持微软雅黑
  • 如无特殊需求，手机端无需定义中文字体，使用系统默认
  • 英文字体和数字字体可使用 Helvetica ，三种系统都支持

  body{
    font-family:Helvetica;
  }

7 禁止用户设置字体大小

.box{
  -webkit-text-size-adjust:100%
}

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

解决手机横屏时默认文字会放大的问题。当text-size-adjust 设为 none 或者 100% 时，则关闭字体大小自动调整功能。

8 禁止文字选中

.box{
  -webkit-user-select:none  /*安卓不支持*/
}

安卓上通过以下javascript代码解决：

document.addEventListener("touchstart",function(e){e.preventDefault})

当你不希望用户在你的网站上选择文本时，一种方法是利用js来实现，另一中方法是将-webkit-user-select 和-moz-user-select 的值设为none。
请谨慎使用这个属性：因为大部分用户是来查看信息的，他们可以复制并存储下来以备将来之用，所以这种方法既无用也无效。如果你禁用了复制粘贴功能，用户还是可以通过查看源文件来获取到他们想要的内容。

9 字体增强 font boosting

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

  p{
    max-height:9999999px;
  }

10 调用原生滚动事件

.box{
  -webkit-overflow-scrolling:touch
}

使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

该属性的值也可以为auto，表示使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。

11 CSS动画页面闪白,动画卡顿

解决方法:

• 尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
• 使用 CSS3 动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏

.box{
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

12 fixed定位缺陷

• ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
• android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
• ios4下不支持position:fixed

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

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

  html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
  }

当text-size-adjust 设为 none 或者 100% 时，则关闭字体大小自动调整功能。

14 上下拉动滚动条时卡顿、慢

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

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

15 禁止复制、选中文本

.box{
  -webkit-user-select:none;user-select:none;
}

解决移动设备可选中页面文本(视产品需要而定)

16 ios和android下触摸元素时出现半透明灰色遮罩

.box{
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}

设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。

17 关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。

.box{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}