移动端问题集（个人总结整理）

1.禁用IOS设备页面数字自动识别为手机号

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

2.移动端全局禁用复制功能

两种思路：一种是从css方面禁止复制，另一种是从js方面限制手机浏览器的长按菜单功能。

/* user-select */ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input, select { -webkit-user-select:auto; /*webkit浏览器*/ }

3.移动端border 1px 的解决方案

.border-top,border-bottom {

position: relative;

}

.border-top::before{

display: block;

position: absolute;

left:0;

top:0;

border-top:1px solid #eeeeee;

width:100%;

content:' ';

}

.border-bottom::after{

display: block;

position: absolute;

left:0;

bottom:0;

border-top:1px solid #eeeeee;

width:100%;

content:' ';

}

@media (-webkit-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {

.border-top::before,border-bottom::after{

-webkit-transform: scaleY(0.7);

transform: scaleY(0.7);

}

}

@media (-webkit-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {

.border-top::before,border-bottom::after{

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

}

@media (-webkit-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {

 

.border-top::before,border-bottom::after {

-webkit-transform: scaleY(0.33);

transform: scaleY(0.33);

}

}