移动端前端笔记大全

快来打我* 2022-08-07 02:00 181阅读 0赞

1、[关闭iOS键盘首字母自动大写][iOS]

IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。

我们写页面的时候有没有办法把这个自动大写关闭呢？autocapitalize的属性可以实现：

在iOS中，默认情况下键盘是开启首字母大写的功能的，如果业务不想出现首字母大写，可以这样：

2、[关闭iOS输入自动修正][iOS 1]

和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。所以这个功能有方便和不方便之处，如果有些业务不需要这个功能，可以通过前端代码关闭。

如果不需要的话，可以这样：

3、[禁止文本缩放][Link 1]

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 \`meta viewport'。

4、[移动端如何清除输入框内阴影][Link 2]

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

<table style="font-size:16px; border-collapse:collapse; border-spacing:0px; width:750px; max-width:100%; color:rgb(90,90,90); border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; margin:0.3em 0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:auto!important; position:relative!important; right:auto!important; top:auto!important; min-height:inherit!important; background:none rgb(56,64,71)!important"> 
 <tbody style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
  <tr style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
   <td style="width:750px; border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; min-height:inherit!important; background:none!important"> 
    <div style="word-break:break-all; border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">input,</code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">textarea&nbsp;{ </code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(147,199,99)!important; background:none!important">border</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">:&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(0,153,0)!important; background:none!important">0</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(102,116,123)!important; background:none!important">/*&nbsp;方法1&nbsp;*/</code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">-webkit-appearance:&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(0,153,0)!important; background:none!important">none</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(102,116,123)!important; background:none!important">/*&nbsp;方法2&nbsp;*/</code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

5、[邮箱地址识别][Link 3]

今天来mark一下在做移动端开发时，如何做邮箱地址识别：

在 Android （iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。

关闭邮箱地址识别：

开启邮件发送：

6、[移动端手机号码识别][Link 4]

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

- 7位数字，形如：1234567

- 带括号及加号的数字，形如：(+86)123456789

- 双连接线的数字，形如：00-00-00111

- 11位数字，形如：13800138000

可能还有其他类型的数字也会被识别，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。

（1）关闭电话识别：

（2）开启电话功能：

（3）开启短信功能：

7、[快速回弹滚动][Link 5]

我们先来看看回弹滚动在手机浏览器发展的历史：

- 早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;

- Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；

- Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；

- iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：

<table style="font-size:16px; border-collapse:collapse; border-spacing:0px; width:750px; max-width:100%; color:rgb(90,90,90); border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; margin:0.3em 0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:auto!important; position:relative!important; right:auto!important; top:auto!important; min-height:inherit!important; background:none rgb(56,64,71)!important"> 
 <tbody style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
  <tr style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
   <td style="width:750px; border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; min-height:inherit!important; background:none!important"> 
    <div style="word-break:break-all; border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">.xxx&nbsp;{ </code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(147,199,99)!important; background:none!important">overflow</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">:&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(0,153,0)!important; background:none!important">auto</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(102,116,123)!important; background:none!important">/*&nbsp;auto&nbsp;|&nbsp;scroll&nbsp;*/</code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">-webkit-overflow-scrolling:&nbsp;touch;</code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：

[http://www.idangero.us/sliders/swiper/index.php][http_www.idangero.us_sliders_swiper_index.php]

8、[移动端禁止选中内容][Link 6]

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

就这么简单，但是目前只支持webkit内核的浏览器。

9、[移动端取消touch高亮效果][touch]

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：

<table style="border-collapse:collapse; border-spacing:0px; width:750px; max-width:100%; border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0.3em 0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:auto!important; position:relative!important; right:auto!important; top:auto!important; min-height:inherit!important; background:none rgb(56,64,71)!important"> 
 <tbody style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
  <tr style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
   <td style="width:750px; border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; min-height:inherit!important; background:none!important"> 
    <div style="word-break:break-all; border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">.xxx&nbsp;{ </code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">-webkit-tap-highlight-</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(147,199,99)!important; background:none!important">color</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">:&nbsp;rgba(</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(0,153,0)!important; background:none!important">0</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">,&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(0,153,0)!important; background:none!important">0</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">,&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(0,153,0)!important; background:none!important">0</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">,&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(0,153,0)!important; background:none!important">0</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">);</code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这个设置，在大部分机子上都是起效果的。但是，移动端三星自带浏览器，点击页面任意a标签时，设置-webkit-tap-highlight-color:rgba(0,0,0,0)还是会有阴影底色，这应该是浏览器强制加上去的，通过代码设置也无法覆盖。

有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。

10、[如何禁止保存或拷贝图像][Link 7]

做移动端H5页面时，经常踩到不少坑，感觉也是时候整理一下移动端开发笔记了，遇到问题能够快速响应，节省开发时间。今天先mark一下在移动端如何禁止保存或拷贝图像：

通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

PS：需要注意的是，该方法只在 iOS 上有效。

[iOS]: http://www.w3cmark.com/2015/394.html
[iOS 1]: http://www.w3cmark.com/2015/395.html
[Link 1]: http://www.w3cmark.com/2015/396.html
[Link 2]: http://www.w3cmark.com/2015/397.html
[Link 3]: http://www.w3cmark.com/2015/393.html
[Link 4]: http://www.w3cmark.com/2015/390.html
[Link 5]: http://www.w3cmark.com/2015/389.html
[http_www.idangero.us_sliders_swiper_index.php]: http://www.idangero.us/sliders/swiper/index.php
[Link 6]: http://www.w3cmark.com/2015/387.html
[touch]: http://www.w3cmark.com/2015/384.html
[Link 7]: http://www.w3cmark.com/2015/383.html