web移动端开发经验总结

整理web移动端开发经验，部分内容借鉴于网上的博文。

1、meta标签

 

2、屏蔽ios点击元素时出现的阴影

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

 

3、ios 设置input 按钮样式会被默认样式覆盖

input,textarea {
      border: 0; 
      -webkit-appearance: none; 
}

 

4、长度单位用rem 

1rem = 16px;
html {    
    font-size:62.5%;
}
p {
    font-size:1rem;      
}

 

5、多用text-shadow这个属性，可以美化文字效果

　　 border-radius、box-shadow、gradient、border-image，在移动端都可以很好的支持，使用这些属性可以实现很炫丽的按钮。

 

6、iOS中禁止用户保存图片、复制图片

　　img标签指定 -webkit-touch-callout:none; 可以禁止设备弹出列表按钮，这样用户就无法保存/复制你的图片。

 

7、禁止用户进行复制, 选择

　　使用 -webkit-user-select: none;  user-select:none;

 

8、html5调用安卓或者ios的拨号功能

　　html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

　　如下：

　　400-810-6999 转 1034

　　拨打手机直接如下

　　点击拨打15677776767

 

9、长时间按住页面出现闪退

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

　　

10、设置缓存

　　手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

 

11、IOS键盘字母输入，默认首字母大写

　　解决方案，设置如下属性

　　

12、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

　　可以通过正则去掉

this.value = this.value.replace(/\u2006/g,'');

 

13、点击事件

　　click 和 tap 比较两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms的延迟，所以请用tap代替click作为点击事件。

 

 

 

待续~~

转载于:https://www.cnblogs.com/chenglu/p/7517882.html