分享一些移动端H5开发常用小技巧

前言

整理一些在移动端H5开发常见的问题给大家做下分享，这里很多是自己在开发过程中遇到的大坑或者遭到过吐糟的问题，希望能给大家带来或多或少的帮助，喜欢的大佬们可以给个小赞，如果有问题也可以一起讨论下。

html 篇

常用的meta属性设置

meta对于移动端的一些特殊属性，可根据需要自行设置

1. <meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
   
2. <meta name="full-screen" content="yes">             //全屏显示
   
3. <meta name="browsermode" content="application">     //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
   
4. <meta name="x5-orientation" content="portrait">     //QQ强制竖屏
   
5. <meta name="x5-fullscreen" content="true">          //QQ强制全屏
   
6. <meta name="x5-page-mode" content="app">            //QQ应用模式

复制代码

电话号码识别

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

• 7 位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双连接线的数字，形如：00-00-00111
• 11 位数字，形如：13800138000
  
  

关闭识别

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

复制代码

开启识别

1. <a href="tel:123456">123456</a>

复制代码

邮箱识别（Android）

安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别：

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

复制代码

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

1. <a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

复制代码

css 篇

0.5px细线

移动端 H5 项目越来越多，设计师对于 UI 的要求也越来越高，比如 1px 的边框。在高清屏下，移动端的 1px 会很粗。

那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。

下面介绍最常用的方法

1. /* 底边框 */
   
2. .b-border {
   
3.   position: relative;
   
4. }
   
5. .b-border:before {
   
6.   content: '';
   
7.   position: absolute;
   
8.   left: 0;
   
9.   bottom: 0;
   
10.   width: 100%;
    
11.   height: 1px;
    
12.   background: #d9d9d9;
    
13.   -webkit-transform: scaleY(0.5);
    
14.   transform: scaleY(0.5);
    
15.   -webkit-transform-origin: 0 0;
    
16.   transform-origin: 0 0;
    
17. }
    
18. /* 上边框 */
    
19. .t-border {
    
20.   position: relative;
    
21. }
    
22. .t-border:before {
    
23.   content: '';
    
24.   position: absolute;
    
25.   left: 0;
    
26.   top: 0;
    
27.   width: 100%;
    
28.   height: 1px;
    
29.   background: #d9d9d9;
    
30.   -webkit-transform: scaleY(0.5);
    
31.   transform: scaleY(0.5);
    
32.   -webkit-transform-origin: 0 0;
    
33.   transform-origin: 0 0;
    
34. }
    
35. /* 右边框 */
    
36. .r-border {
    
37.   position: relative;
    
38. }
    
39. .r-border:before {
    
40.   content: '';
    
41.   position: absolute;
    
42.   right: 0;
    
43.   bottom: 0;
    
44.   width: 1px;
    
45.   height: 100%;
    
46.   background: #d9d9d9;
    
47.   -webkit-transform: scaleX(0.5);
    
48.   transform: scaleX(0.5);
    
49.   -webkit-transform-origin: 0 0;
    
50.   transform-origin: 0 0;
    
51. }
    
52. /* 左边框 */
    
53. .l-border {
    
54.   position: relative;
    
55. }
    
56. .l-border:before {
    
57.   content: '';
    
58.   position: absolute;
    
59.   left: 0;
    
60.   bottom: 0;
    
61.   width: 1px;
    
62.   height: 100%;
    
63.   background: #d9d9d9;
    
64.   -webkit-transform: scaleX(0.5);
    
65.   transform: scaleX(0.5);
    
66.   -webkit-transform-origin: 0 0;
    
67.   transform-origin: 0 0;
    
68. }
    
69. /* 四条边 */
    
70. .setBorderAll {
    
71.   position: relative;
    
72.   &:after {
    
73.     content: ' ';
    
74.     position: absolute;
    
75.     top: 0;
    
76.     left: 0;
    
77.     width: 200%;
    
78.     height: 200%;
    
79.     transform: scale(0.5);
    
80.     transform-origin: left top;
    
81.     box-sizing: border-box;
    
82.     border: 1px solid #e5e5e5;
    
83.     border-radius: 4px;
    
84.   }
    
85. }

复制代码

屏蔽用户选择

禁止用户选择页面中的文字或者图片

1. div {
   
2.   -webkit-touch-callout: none;
   
3.   -webkit-user-select: none;
   
4.   -khtml-user-select: none;
   
5.   -moz-user-select: none;
   
6.   -ms-user-select: none;
   
7.   user-select: none;
   
8. }

复制代码

清除输入框内阴影

在 iOS 上，输入框默认有内部阴影,以这样关闭：

1. div {
   
2.   -webkit-appearance: none;
   
3. }

复制代码

如何禁止保存或拷贝图像

代码如下

1. img {
   
2.   -webkit-touch-callout: none;
   
3. }

复制代码

输入框默认字体颜色

设置 input 里面 placeholder 字体的颜色

1. input::-webkit-input-placeholder,
   
2. textarea::-webkit-input-placeholder {
   
3.   color: #c7c7c7;
   
4. }
   
5. input:-moz-placeholder,
   
6. textarea:-moz-placeholder {
   
7.   color: #c7c7c7;
   
8. }
   
9. input:-ms-input-placeholder,
   
10. textarea:-ms-input-placeholder {
    
11.   color: #c7c7c7;
    
12. }

复制代码

用户设置字号放大或者缩小导致页面布局错误

设置字体禁止缩放

1. body {
   
2.   -webkit-text-size-adjust: 100% !important;
   
3.   text-size-adjust: 100% !important;
   
4.   -moz-text-size-adjust: 100% !important;
   
5. }

复制代码

android系统中元素被点击时产生边框

部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

1. a,button,input,textarea{
   
2.   -webkit-tap-highlight-color: rgba(0,0,0,0)
   
3.   -webkit-user-modify:read-write-plaintext-only;
   
4. }

复制代码

iOS 滑动不流畅

ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

解决方案

1、在滚动容器上增加滚动 touch 方法

1. .wrapper {
   
2.   -webkit-overflow-scrolling: touch;
   
3. }

复制代码

2、设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

1. body {
   
2.   overflow-y: hidden;
   
3. }
   
4. .wrapper {
   
5.   overflow-y: auto;
   
6. }

复制代码