移动端的使用越来越广泛,做程序的时候,总会遇到各种各样的问题,总结了一些经常遇到的问题,欢迎参考指正。
一、meta的使用
1、强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉:
<meta name="msapplication-tap-highlight" content="no">
3、忽略页面的数字为电话,忽略email识别
<meta name="format-detection" content="telephone=no, email=no"/>
二、 安卓浏览器看背景图片,有些设备会模糊。
用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?
经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio=2。现在android比较乱,有1.5的,有2的也有3的。
想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍)。例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了。
代码可以如下:
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定 background-size:contain;都可以,大家试试!
三、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport
还有就是,有些手机网站我们看到如下声明:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明。
使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
<meta name="viewport" content="user-scalable=0" />
但是为了更好的兼容,我们会使用完整的viewport设置。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。
四、有关Flexbox弹性盒子布局一些属性
1、不定宽高的水平垂直居中
.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
2、[flexbox版]不定宽高的水平垂直居中
.xx{
justify-content:center;//子元素水平居中,
align-items:center;//子元素垂直居中;
display:-webkit-flex;
}
五、旋转屏幕时,字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
六、单击延迟
click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。
开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。
七、字体的处理
对于网站字体设置
1、移动端项目:
font-family:Tahoma,Arial,Roboto,“Droid Sans”,“Helvetica Neue”,“Droid Sans Fallback”,“Heiti SC”,sans-self;
2、移动和pc端项目:
font-family:Tahoma,Arial,Roboto,“Droid Sans”,“Helvetica Neue”,“Droid Sans Fallback”,“Heiti SC”,“Hiragino Sans GB”,Simsun,sans-self;
3、字体大小尽量使用pt或者em,rem,代替px。
4、设置input里面placeholder字体的大小::-webkit-input-placeholder{ font-size:10pt;}
5、解决字体在移动端比例缩小后出现锯齿的问题:-webkit-font-smoothing: antialiased;
参考文章:
https://blog.csdn.net/qq_41077075/article/details/88600117
https://blog.csdn.net/qq_39198420/article/details/77848222