移动端HTML5页面开发备忘录-CSDN博客

关于Meta的设置

1.基本样式的设置

<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1,
user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection" content="telephone=no, email=no" />
复制代码

2.搜索引擎的设置

<!-- 搜索引擎索引方式：通常有如下几种取值：none，noindex，nofollow，
all，index和follow。-->
<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->
复制代码

3.页面缓存的设置

<!-- 清除缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
复制代码

常见移动端字体

/*中英字体名对照表
宋体      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; }
复制代码

字体单位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; }
复制代码

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：当前元素

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

<input autocapitalize="off" autocorrect="off" />
复制代码

消除transition闪屏

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
复制代码

屏幕旋转的事件和样式

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){   }
复制代码

其他一些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}

ul {-webkit-overflow-scrolling : touch}
/*解决列表在移动端滑动阻涩的问题*/
复制代码

附：文章中有些内容是搬用的，本篇只是个人整理出来。持续增添中……