移动web开发-CSDN博客

移动web开发与pc端的开发还是有很大的区别的, 虽然移动web可以使用一些新的布局, 如flexbox, 但是因为移动端屏幕尺寸巨多, 而屏幕尺寸又很小, 要充分利用屏幕布局, 因此适配是一个很繁琐的过程, 针对不同的操作系统的特殊处理也比较多, 因此这里做一个总结.

meta

优先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
复制代码

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

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

忽略将页面中的数字识别为电话号码(IOS手机会自动识别电话号码邮箱的链接, 设置特殊的样式)

<meta name="format-detection" content="telephone=no" />
复制代码

忽略对邮箱地址的识别

<meta name="format-detection" content="email=no" />
复制代码

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->
复制代码

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

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

添加到主屏后的标题（IOS）

<meta name="apple-mobile-web-app-title" content="标题">
复制代码

添加到主屏后的APP图标

<!-- 设计原图 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- 添加高光效果 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">
复制代码

启用 WebApp 全屏模式（IOS）

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
复制代码

百度禁止转码

<meta http-equiv="Cache-Control" content="no-siteapp" />
复制代码

字体

移动端字体所有系统都不支持微软雅黑, 中文使用默认的字体即可, 英文使用Helvetica可适配绝大部分机型.

html, body{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
复制代码

rem 使用媒体查询

  html{font-size:10px}
  @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
  @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
  @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
  @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
  @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
  @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
  @media screen and (min-width:800px){html{font-size:25px}}
复制代码

touch事件

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

TouchEvent

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

参数信息(changedTouches[0])

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

click300ms延迟

使用fastclickjs, 或者zeptojs的tap事件, 这算是移动端适配的基本技巧了, 而实际上我在fastclick的README.md中看到下面这段话

Note: As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it. 注意：截至2015年底，大多数移动浏览器（尤其是Chrome和Safari）不再具有300毫秒的触摸延迟，因此fastclick对新浏览器没有任何好处，并且可能会在您的应用程序中引入错误。仔细考虑您是否真的需要使用它。

// fastclick
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script type='application/javascript'>
window.addEventListener('load', function() {
    new FastClick(document.body);
}, false);
</script>
复制代码

兼容处理

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

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

部分android系统中元素被点击时产生的边框怎么去掉

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
复制代码

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

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

打电话发短信写邮件

# 电话
<a href="tel:0755-10086">打电话给:0755-10086</a>

# 短信
<a href="sms:10086">发短信给: 10086</a>

# 邮件
<a href="mailto:xxx@foxmail.com">xxx@foxmail.com</a>
复制代码

reset.mobile.css

列出我的初始化样式文件

@charset "utf-8";

/*禁止文字缩放 字体设置 取消touch高亮效果*/
html{
  min-width:320px;
  max-width:640px;
  margin:0 auto;
  -webkit-text-size-adjust:100%; /*关闭横屏时字体大小自动调整功能.*/
  background:transparent;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

body{
  width:100%;
  height:100%;
  -webkit-overflow-scrolling: touch; /*快速滚动和回弹的效果*/
}

article,aside,dialog,footer,header,section,footer,nav,figure,a{
  display:block;
}

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b,
textarea, button, input, select, figure, figcaption, ol, pre, fieldset, legend, blockquote {
  margin:0;
  padding:0;
}

fieldset, img ,button{
  border: none;
  outline:none;
}

/*去除单元格之间的距离*/
table{
  border-collapse:collapse;
  border-spacing:0;
}

/*清除输入框内阴影*/
input,select,textarea{
  border:none;
  -webkit-appearance:none; /*去除系统默认appearance的样式,常用于IOS下移除原生样式*/
  appearance:none;
}

/*chrome表单自动填充去掉input黄色背景*/
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-box-shadow:0 0 0px 1000px white inset;
}

ul,ol,dd,dt,dl{
  list-style-type:none;
}

i,em{
  font-style:normal;
}

/*禁止长按页面弹出菜单（iOS）*/
img,a{
-webkit-touch-callout:none;
}

a,a:active,a:hover{
  text-decoration:none;
}

/*去掉点击链接和文本框对象时默认的灰色半透明覆盖层（iOS）或者虚框（Android）*/
a, button, input, textarea, select{
  -webkit-tap-highlight-color:transparent;
  -webkit-border-radius:0;
}
复制代码