样式reset统一标签样式呈现效果
300ms点击延迟问题:FastClick.attach(document.body, fastclick是个插件,解决移动端300ms延迟问题)
移动端的一像素边框问题
即在移动端的CSS写了1px,实际上显示会比1px粗。
border: solid 1px;
在移动端的HTML的header中添加下述代码,意思是本页面的viewport宽度为设备宽度,初始缩放值和最大缩放值是1,禁止用户缩放。
< meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
移动端的window对象有个devicePixelRatio属性=设备像素 / css像素。UI设计稿中要求的是设备物理像素,但是在CSS中表示的不是物理像素。
解决方案:
参考border. css: https://www.cnblogs.com/cckui/p/9267534.html
参考: https://www.jianshu.com/p/fa670b737a29
.border {border: 1px solid #eee}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border {border: 0.5px solid #eee}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border (border: 0.33333px solid #eee)
}
缺点: 对设备有要求,且目前的兼容性比较差
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
然后利用JS来获取meta元素,对window.devicePixelRatio属性进行判断,再对其中的content属性进行重新设置。
var viewport = document.querySelector("meta[name=viewport]");
if(window.devicePixelRatio==1){
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
}
if(window.devicePixelRatio==2){
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no');
}
if(window.devicePixelRatio==3){
viewport.setAttribute('content', 'width=device-width, initial-scale=0.3333333, maximum-scale=0.3333333,, user-scalable=no');
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
var fontsize = 10 * (docEl.clientWidth / 320) + ‘px’,是设置HTML的font-size的大小的,单位是px。documnet.body.clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变.
首先浏览器一般默认是16px=1rem,1px=1/16rem=0.0625rem,
设置HTML标签的font-size的大小10px(默认大部分浏览器为16px),页面其他标签可以通过设置rem为HTML的倍数来实现适配。
那么怎么将设计稿的单位转化为rem呢?
屏幕根据设计稿的比例转换对应的rem值,比如:
320的设置 = 10(clientWidth/320)* 以320宽,10px作为基准,其中clientWidth在iPhone5或5S下是320px,iPhone6下是375px,iPhone6P下是414px等等。
640的设置 = 20*(clientWidth/320) 也是这样以320为基准。
div::after{
content:'';
width:100%;
border-bottom:1px solid #000;
transform: scaleY(0.5);
}
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
可参考:https://www.jianshu.com/p/5ff121936666