移动端开发常见问题

发表于

常用的meta标签

viewport设置

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

避免IE使用兼容模式

1
<meta http-equiv="X-UA-Compatible" content="IE=edge">

uc强制竖屏

1
<meta name="screen-orientation" content="portrait">

QQ强制竖屏

1
<meta name="x5-orientation" content="portrait">

UC强制全屏

1
<meta name="full-screen" content="yes">

QQ强制全屏

1
<meta name="x5-fullscreen" content="true">

禁止识别电话号码

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

禁止识别邮箱号码

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

防止地址跳转到地图

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

防止日期被显示成别的格式

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

拨打电话和发邮件 

1
2
3
4
5
href="tel:"  
href="mailto:"
<!--eg:-->
<a href="tel:8602188888888">+86 021 88888888</a>

清除点击阴影

1
a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}

消除按钮圆角

1
input，button{-webkit-appearance: none;border-radius: 0;}

iOS 浏览器横屏时会重置字体大小

1
2
3
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

移动端字体

1
font-family: '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;

禁止复制、选中文本

1
2
3
4
5
6
Element {
 -webkit-user-select: none;
 -moz-user-select: none;
 -khtml-user-select: none;
  user-select: none;
}

Font Boosting

在一段文字没有给其设置高度的时候在webkit内核下文字的大小被浏览器放大 参考

Fixed 兼容问题

IOS的body的overflow问题（加overflow:hidden横向仍可以滚动）