meta标签

移动端开发中头部经常添加的meta

  1. 这个meta可以使文档的宽度与设备的宽度保持1:1，初始缩放比例是1.0，不允许用户通过点击或者缩放等操作对屏幕放大浏览（ios10以上失效），文档最大宽度比例是1.0。

    1
    <meta name="viewport" content="width=device-width,initial scale=1.0,user-scalable=no,maxinum-scale=1.0">

  2. 禁止ios自动识别电话。

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

  3. 禁止android自动识别邮箱。

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

  4. 网站开启对web app程序的支持，删除默认的苹果safari工具栏和菜单栏。

    content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这行meta就不用加了，默认就是显示。

    1
    <meta name="apple-mobile-web-app-capable" content="yes">

  5. 控制状态栏（屏幕顶部条）显示样式。

    <!– 可选default(白色)、black（黑色）、black-translucent（灰色半透明）。若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 –>

    1
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    ​

打电话发短信

1
2
<a href="tel:110">打电话给:110</a>
<a href="sms:10086">发短信给: 10086</a>

ios中去掉input等默认样式

1
input,button,textarea{-webkit-appearance: none;}

移动端click屏幕产生200-300 ms的延迟响应

click事件因为要等待确认是否是双击事件，会有300ms的延迟（两次点击事件间隔小于300ms就认为是双击），用户体验不好。解决方案第一个就是采用touchstart或者touchend代替click；或者封装tap事件来代替click 事件，tap事件由touchstart事件+ touchmove（判断是否是滑动事件）+touchend事件封装组成。

在手机上，click的延迟将近400ms。对于用户而言，是一个很严重的延迟了！所以在手机上，并不建议用click。

​

​

​

__END__

Live For Code
文章作者：Live For Code
文章出处：移动端开发
作者签名：简单地活着, 肆意又精彩.
关于主题：Hexo - Live For Code
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处