移动端常见问题

Posted 2020-11-21 xiexiaopeng

Chrome本地跨域

　　open -a /Applications/Google Chrome.app --args --disable-web-security --user-data-dir

伪类:active生效

　　要CSS伪类:active生效,只需要给document绑定touchstart或touchend事件

　　document.addEventListener(‘touchstart‘,function(){},false)

消除transition闪屏　

　　-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
　　-webkit-backface-visibility: hidden; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

消除IE10里面的x号

　　input:-ms-clear{display:none}

关于IOS和OSX端字体的优化(横竖屏会出现字体加粗)

　　ios浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决ios上的问题,单桌面版safari的字体缩放功能会失效,因此最佳方案是将text-size-adjust为100%;

　　-webkit-text-size-adjust: 100%;
　　-ms-text-size-adjust: 100%;
　　text-size-adjust: 100%;

不让Android手机识别邮箱

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

禁止IOS识别长串数字为电话　

　　<meta content="telephone=no" name="format-detection" />
　　#### 禁止 iOS 弹出各种操作窗口
　　-webkit-touch-callout:none

禁止用户选中文字

　　-webkit-user-select:none

自动大写与自动修正

　　要关闭这两项功能,可以ton过autocapitalize与autocorrect这两个选项

　　<input type="text" autocapitalize="off" autocorrect="off" />

设置被点击时高亮背景

　　webkit是苹果浏览器引擎,tap点击,highlight背景高亮,color颜色,颜色用数值调节

　　-webkit-tap-highlight-color:rgba(255,0,0,0.5)

伪类+transform解决移动端H5的1px过粗问题

　　原理是把原先元素的borde去掉,然后利用:before或者:after重做border,并通过transform的scale缩小一半,原先的元素相对定位,新作的border绝对定位

　　1）单条border样式设置

　　　　.thin-border{
　　　　position: relative;
　　　　border:none;
　　　　}
　　　　.thin-border:after{
　　　　content: ‘‘;
　　　　position: absolute;
　　　　bottom: 0;
　　　　left: 0;
　　　　right: 0;
　　　　background: #000;
　　　　height: 1px;
　　　　transform: scaleY(0.5);
　　　　transform-origin: 0 0;
　　　　}

　　2）四条border样式设置

　　　　.thin-border{
　　　　position: relative;
　　　　border:none;
　　　　}
　　　　.thin-border:after{
　　　　content: ‘‘;
　　　　position: absolute;
　　　　top: 0;
　　　　left: 0;
　　　　border: 1px solid #000;
　　　　box-sizing: border-box;
　　　　width: 200%;
　　　　height: 200%;
　　　　transform: scale(0.5);
　　　　transform-origin: left top;
　　　　}

手机端英文系统乱码问题

　　在页面顶部增加:

　　<meta http-equiv="Content-Type" content="tex/html";charset="UTF-8">

　　//脚本也有乱码现象

　　<script type="text/javascript" src="//static.360buyimg.com/xtzc-fans-call/main.js?20180618" charset="utf-8"></script>

　　服务端配置增加

　　add_header  Content-Type ‘text/html;charset=utf-8‘;