移动端h5注意事项

 

有关Meta

基本Meta

 

 

 

搜索引擎Meta

页面缓存设置Meta

 

 

常见问题

 

 

移动端字体设置

/*中英字体名对照表

宋体      SimSun

黑体      SimHei

微信雅黑   Microsoft Yahei

微软正黑体 Microsoft JhengHei

新宋体    NSimSun

新细明体  MingLiU

细明体    MingLiU

标楷体    DFKai-SB

仿宋     FangSong

楷体     KaiTi

仿宋\_GB2312  FangSong\_GB2312

楷体\_GB2312  KaiTi\_GB2312  

说明：中文字体多数使用宋雅黑，英文用Helvetica

*/

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

打电话发短信写邮件

// 打电话

打电话给:010-88888

//  发短信

发短信给: 88888

// 写邮件

//注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头

//1.普通邮件

快来点我啊，给你发种子。

//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）

快来点我啊，给你发种子。

//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）

快来点我啊，给你发种子。

//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址

快来点我啊，给你发种子。

//5.包含主题，用?subject=

快来点我啊，给你发种子。

//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行 

快来点我啊，给你发种子。

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

快来点我啊，给你发种子。

//8.内容包含图片（PC不支持）

快来点我啊，给你发种子。

//9.完整示例

快来点我啊，给你发种子。

touch事件

事件响应顺序：ontouchstart > ontouchmove > ontouchend > onclick

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

TouchEvent说明：

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

参数信息(changedTouches[0])

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

科普：移动端click事件200-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
• zepto的touch模块

点击元素产生背景或边框问题

a,button,input,textarea { 

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

    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

}   

/也可以...，简单粗暴/

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

字体单位font-size选择px还是rem

 /*如需适配多种移动设备，建议使用rem。以下为参考值：*/

html { font-size: 62.5%; }   /*10÷16 = 62.5%\*/

/*设置12px字体。

注：在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级*/

body { font-size:12px; font-size:1.2rem; }

其它一些实用CSS技巧

/*禁止长按链接与图片弹出菜单*/

a,img { -webkit-touch-callout: none }    

/*禁止ios和android用户选中文字*/

html,body {-webkit-user-select:none; user-select: none; }

/*改变输入框placeholder的颜色值*/

::-webkit-input-placeholder { /* WebKit browsers */

color: #999; }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: #999; }

::-moz-placeholder { /* Mozilla Firefox 19+ */

color: #999; }

:-ms-input-placeholder { /* Internet Explorer 10+ */

color: #999; }

input:focus::-webkit-input-placeholder{ color:#999; }

/*android上去掉语音输入按钮\*/

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

禁用input在ios下，输入英文首字母的默认大写

屏幕旋转的事件和样式

JS处理：

function orientInit(){

    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';

    if(orientChk =='lapdscape'){

        //横屏下需要执行代码

    }else{

        //竖屏下需要执行代码

    }

}

orientInit();

window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){

    setTimeout(orientInit, 100);

},false)

CSS处理：

/*竖屏时样式*/

@media all and (orientation:portrait){   }

/*横屏时样式*/

@media all and (orientation:landscape){   }

播放视频不全屏

消除transition闪屏

.css {

    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;

    -webkit-perspective: 1000;

}

点击样式闪动

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝色边框：outline:none；

-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
// i.e . Nexus5/Chrome and Kindle Fire HD 7 ''
-webkit-tap-highlight-color : transparent ;  

屏蔽用户选择

Q: 禁止用户选择页面中的文字或者图片
A:代码如下

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

移动端如何清除输入框内阴影

Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
A:代码如下

-webkit-appearance: none;

禁止文本缩放

Q: 禁止文本缩放
A:代码如下

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

如何禁止保存或拷贝图像

Q: 如何禁止保存或拷贝图像
A:代码如下

img{-webkit-touch-callout: none;}

解决字体在移动端比例缩小后出现锯齿的问题

Q: 解决字体在移动端比例缩小后出现锯齿的问题
A:代码如下

-webkit-font-smoothing: antialiased;

设置input里面placeholder字体的大小

Q: 设置input里面placeholder字体的大小
A:代码如下

::-webkit-input-placeholder{ font-size:10pt;}

audio元素和video元素在ios和andriod中无法自动播放

Q: audio元素和video元素在ios和andriod中无法自动播放
A:代码如下,触屏及播放

$('html').one('touchstart',function(){
audio.play()
})

手机拍照和上传图片

Q: 针对file类型增加不同的accept字段
A:代码如下

的accept 属性

输入框自动填充颜色

Q: 针对input标签已经输入过的，会针对曾经输入的内容填充黄色背景，这是webkit内核自动添加的，对应的属性是autocomplete,默认是on,另对应的样式是input:-webkit-autofill 且是不可更改的。
A:方案如下 1 设置标签的autocomplete="off",亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例）

 box-shadow:0 0  0 1000px  #fff inset ;
 -webkit-box-shadow: 0 0 0px 1000px #fff inset;

开启硬件加速

Q: 优化渲染性能
A:代码如下

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

用户设置字号放大或者缩小导致页面布局错误

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

移动端去除type为number的箭头

 input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
      -webkit-appearance: none !important;
      margin: 0; 
  }

实现横屏竖屏的方案

css 用 css3媒体查询，缺点是宽度和高度不好控制

@media screen and (orientation: portrait) {
    .main {
        -webkit-transform:rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 100vh;
        height: 100vh;
        /*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
        overflow: hidden;
    }
}

@media screen and (orientation: landscape) {
    .main {
        -webkit-transform:rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

js 判断屏幕的方向或者resize事件

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#print');
         if( width > height ){

            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }

    }, false);