移动端常用样式及兼容相关

本文将提供移动端的常用样式以及各个不同的移动端版本相关兼容问题

**本文原帖地址：**https://segmentfault.com/a/1190000000410773#articleHeader35

meta标签相关知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

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

忽略将页面中的数字识别为电话号码

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

忽略Android平台中对邮箱地址的识别

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

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

移动端视口通用模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以删除-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>viewport通用</title>
  <!--根据系统识别宽度-->
  <script type="text/javascript">
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth / 750;
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">');
    }
  </script>
  <link style="text/css" rel="stylesheet" href="home.css">
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <!--页面内容-->
</body>
</html>

移动端问题总结

移动端定义font-family

各系统的默认字体和常用字体

系统

默认西文字体

默认中文字体

其他常用西文字体

其他常用中文字体

Windows

宋体

Tahoma、Arial、Verdana、Georgia

微软雅黑、黑体

Android 4.0以下

Droid Sans

Droid Sans Fallback

Arial

无宋体、无微软雅黑

Android 4.0及以上

Roboto

Arial

无宋体、无微软雅黑

iOS

Helvetica Neue

Heiti SC (黑体)

Tahoma(v7.0)、Arial、Verdana、Georgia

STHeiti(v7.0)、无宋体、无微软雅黑

Mac OS X 10.6以下

Helvetica Neue

STHeiti (华文黑体)

Tahoma、Arial、Verdana、Georgia

宋体、无微软雅黑

Mac OS X 10.6及以上

Helvetica Neue

Hiragino Sans GB (冬青黑体简体中文)

Tahoma、Arial、Verdana、Georgia

宋体、无微软雅黑

各PC端对字体的支持情况

五大类字体

IE系列

Chrome

Firefox

sans-serif（无衬线）

支持

不支持

serif（衬线）

支持

monospace（等宽）

支持

fantasy（梦幻）

支持

cuisive（草体）

不支持

各移动端对字体的支持情况

五大类字体

安卓4.0

IOS6.0

WP8

sans-serif（无衬线）

支持

serif（衬线）

支持

monospace（等宽）

支持

fantasy（梦幻）

不支持

支持

不支持

cuisive（草体）

不支持

移动端针对个别元素需要调整字体的方法(非全局定义)

/*微软雅黑*/
.yahei{font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif!important}
/*宋体*/
.songti{font-family: "Helvetica Neue", Helvetica,"Songti SC", "SimSun", serif!important}
/*楷体*/
.kaiti{font-family: "Helvetica Neue", Helvetica, "KaiTi", "楷体", "STKaiti", "华文楷体", serif!important}
/*华文仿宋*/
.fangsong{font-family: "Times New Roman", "Helvetica Neue", Helvetica, "FangSong", "仿宋", "STFangSong", "华文仿宋", serif!important}

移动端全局定义字体样式

body{
  /*移动端项目*/
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
/*pc端(含Mac)项目*/
font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;
/*移动和pc端项目*/
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;
}

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持

移动端touch事件（滑动）

支持webkit、Android

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

TouchEvent

touches：屏幕上所有手指的信息
targetTouches：手指在目标区域的手指信息
changedTouches：最近一次触发该事件的手指信息
touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息

参数信息(changedTouches[0])

clientX、clientY在显示区的坐标
target：当前元素

支持winphone 8

MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动
MSPointerUp——当手指离开屏幕时触发

移动端click事件延迟300ms

历史原因：

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟，地址：https://github.com/ftlabs/fas...
zepto的touch模块，tap事件也是为了解决在click的延迟问题，地址：http://www.css88.com/doc/zeptojs_api/

移动端触摸事件响应顺序

ontouchstart
ontouchmove
ontouchend
onclick

解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

清除IOS系统手机对input等表单元素的默认样式

.css{-webkit-appearance:none;}

伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

CSS美化Placeholder（占位符）提示信息的样式兼容

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

手机对Placeholder提示信息都基本带有默认的样式，兼容各种浏览器的使用方式：

.css::-webkit-input-placeholder {color: #777;}    /* WebKit browsers */
.css:-moz-placeholder {color: #777;opacity: 1;}   /* Mozilla Firefox 4 to 18 */
.css::-moz-placeholder {color: #777;opacity: 1;}  /* Mozilla Firefox 19+ */
.css:-ms-input-placeholder {color: #777;}         /* Internet Explorer 10+ */

webkit表单输入框placeholder的文字能换行么

ios可以，android不行~

在textarea标签下都可以换行~

取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

-webkit-tap-highlight-color :当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

文档参考：http://www.css88.com/webkit/-webkit-tap-highlight-color/

关闭手机端横屏或者竖屏自动调整字体大小功能

ios使用-webkit-text-size-adjust禁止调整字体大小:

body{-webkit-text-size-adjust: 100%!important;}

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

android使用以下代码，该接口只在微信浏览器下有效:

/**
 * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
 * 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示
 * 仅供参考
 */
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                    alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                alert(JSON.stringify(res));
            });
        },0);
    }
})();

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

适用于：链接元素比如新窗口打开，img元素比如保存图像等等取值：

none：系统默认菜单被禁用
inherit：系统默认菜单不被禁用

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

当然pc端现在也在用禁止用户选中文字，兼容写法：

.test{
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
}

当然有时候pc上也直接写到html代码中，如：

<div class="test" onselectstart="return false;" unselectable="on">这里的文本无法被选中</div>

代码解释：

IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到user-select:none 的效果；unselectable 的另一个值是 off；
除Chrome和Safari外，在其它浏览器中，如果将文本设置为-ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为-ms-user-select:none; 的区域文本；
对应的脚本特性为userSelect。

实现打电话发短信，发邮件

打电话：<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信：winphone系统无效，<a href="sms:10086">发短信给: 10086</a>
发邮件：<a href="mailTo:[email protected]">[email protected]</a>

发邮件详细参数：

参考地址：http://www.cnblogs.com/PeunZhang/p/4952783.html

1、基础写法

当浏览者点击这个链接时，浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人的地址下面

<a href="mailto:[email protected]">单击这里发电子邮件</a>

2、在收件人地址后用?cc=开头，填写抄送地址(android存在兼容问题)

<a href="mailto:[email protected][email protected]">单击这里发电子邮件</a>

3、紧跟着抄送地址之后，写上&bcc=，填上密件抄送地址(android存在兼容问题)

<a href="mailto:[email protected][email protected]&[email protected]">单击这里发电子邮件</a>

4、包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现

<a href="mailto:[email protected];[email protected]">单击这里发电子邮件</a>

5、包含主题，用?subject=可以填上主题

<a href="mailto:[email protected]?subject=【邀请函】">单击这里发电子邮件</a>

6、包含内容，用?body=可以填上内容

内容包含文本，使用%0A给文本换行

<a href="mailto:[email protected]?body=邀请您参加腾讯onepiece分享%0A%0A期待您的到来%0A%0Apeunzhang">单击这里发电子邮件</a>

内容包含链接，含http(s)://等的文本自动转化为链接

<a href="mailto:[email protected]?body=http://www.cnblogs.com/PeunZhang/">单击这里电子邮件</a>

内容包含图片，PC端不支持

<a href="mailto:[email protected]?body=<img src='http://images.cnblogs.com/cnblogs_com/PeunZhang/286351/o_peunzhang_cnblogs_code.png' width='200' height='200'>">单击这里发电子邮件</a>

7、完整示例，如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头

<a href="mailto:[email protected];[email protected];[email protected][email protected];[email protected]&[email protected]&subject=【邀请函】&body=邀请您参加腾讯onepiece分享">单击这里发电子邮件</a>

移动端实现类似hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活移动端css的active效果。

直接在body上添加ontouchstart，同样可激活移动端css的active效果，比较推荐这种方式，代码如下：

html代码：

<body ontouchstart>
</body>

css代码：

.btn:active{background-color: red;}

开启硬件加速

解决页面闪白，保证动画流畅

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

屏幕旋转的事件和样式

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}

样式：

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

IE10（winphone8）表单元素默认外观重置

禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {
    display: none;
}

禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
    display: none;
}

禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
    display: none;
}

Retina 显示屏的问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

移动端设置滚动条的默认样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(255,0,0,0.4);
}

为移动端页面中滑动滚动条的时候，添加惯性效果的方法

首先设置：

div{height:100%;overflow-y:auto;}

但是实际在 iPhone 上测试时，发现 Safari（也包括很多 iOS App 内置浏览器使用的 UIWebView）竟然完全禁用掉了著名的「惯性滚动」效果。

但解决方法是有的，令人吃惊的是还非常简单：只有一条 CSS 属性即可解决问题：

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

有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题，实际上可以通过一条 CSS 属性把页面加载到内存来解决：

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

注：如果设置了-webkit-overflow-scrolling: touch;那么在IOS系统下对于改变滚动条的默认样式将失效，即上面一条所述。

移动端实现控制文本行数

div{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

移动端使用flex让内容平均分配

<nav>
  <a href="#">a</a>
  <a href="#">b</a>
  <a href="#">c</a>
</nav>

nav{display:-webkit-flex;display:flex;}
a{-webkit-flex:1;flex:1;}

移动端web页面,弹出键盘时挡住input

在vue环境下：

directives: {
    focus: function(el) {
      let self = this.app;
      el.addEventListener("focus", function(event) {
        //对盒子元素使用scrollIntoView和scrollIntoViewIfNeeded
        self.$refs.window.scrollIntoView(true);
        self.$refs.window.scrollIntoViewIfNeeded();
      });
    }
  }

在原生js环境下：

document.getElementById("box").addEventListener("focus",function(ev) {
  ev.scrollIntoView(true);
  ev.scrollIntoViewIfNeeded();
})

Last updated 2 years ago

hashtagmeta标签相关知识

hashtagH5页面窗口自动调整到设备宽度，并禁止用户缩放页面

hashtag忽略将页面中的数字识别为电话号码

hashtag忽略Android平台中对邮箱地址的识别

hashtag将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

hashtag移动端视口通用模板

hashtag移动端问题总结

hashtag移动端定义font-family

hashtag移动端touch事件（滑动）

hashtag移动端click事件延迟300ms

hashtag移动端触摸事件响应顺序

hashtag清除IOS系统手机对input等表单元素的默认样式

hashtagCSS美化Placeholder（占位符）提示信息的样式兼容

hashtagwebkit表单输入框placeholder的文字能换行么

hashtag取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题

hashtag关闭手机端横屏或者竖屏自动调整字体大小功能

hashtag禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

hashtag禁止ios和android用户选中文字

hashtag实现打电话发短信，发邮件

hashtag移动端实现类似hover效果

hashtag开启硬件加速

hashtagandroid 上去掉语音输入按钮

hashtag取消input在ios下，输入的时候英文首字母的默认大写

hashtag屏幕旋转的事件和样式

hashtagIE10（winphone8）表单元素默认外观重置

hashtagRetina 显示屏的问题

hashtag移动端设置滚动条的默认样式

hashtag为移动端页面中滑动滚动条的时候，添加惯性效果的方法

hashtag移动端实现控制文本行数

hashtag移动端使用flex让内容平均分配

hashtag移动端web页面,弹出键盘时挡住input

meta标签相关知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

忽略将页面中的数字识别为电话号码

忽略Android平台中对邮箱地址的识别

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

移动端视口通用模板

移动端问题总结

移动端定义font-family

移动端touch事件（滑动）

移动端click事件延迟300ms

移动端触摸事件响应顺序

清除IOS系统手机对input等表单元素的默认样式

CSS美化Placeholder（占位符）提示信息的样式兼容

webkit表单输入框placeholder的文字能换行么

取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题

关闭手机端横屏或者竖屏自动调整字体大小功能

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

禁止ios和android用户选中文字

实现打电话发短信，发邮件

移动端实现类似hover效果

开启硬件加速

android 上去掉语音输入按钮

取消input在ios下，输入的时候英文首字母的默认大写

屏幕旋转的事件和样式

IE10（winphone8）表单元素默认外观重置

Retina 显示屏的问题

移动端设置滚动条的默认样式

为移动端页面中滑动滚动条的时候，添加惯性效果的方法

移动端实现控制文本行数

移动端使用flex让内容平均分配

移动端web页面,弹出键盘时挡住input