一：iPhone中 overflow:scroll 横向或纵向滑动速度慢或者卡，感觉很不流畅，只需要对滚动元素设置：
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
二：flex布局下，子元素A设置了固定宽度，但由于另一个子元素B内容过宽导致A元素被挤压，实际宽度不是原来定义的宽度，此时需要对A元素设置：
flex-shrink:0;
A元素将不会再被挤压
三：ios和android下点击元素时出现灰色阴影背景
-webkit-tap-highlight-color:rgba(255,255,255,0);
四：禁止复制、选中文本
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
五：去除iphone上输入框内阴影等默认样式
border: 0;
-webkit-appearance:none;
六：去除input获取焦点时出现的默认边框
outline:none
七：禁止iPhone和Android横屏或竖屏模式下字体自动缩放：
-webkit-text-size-adjust:none;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
八：部分Android手机圆角效果失效：
background-clip:padding-box;
九：设置浏览器不缓存：
<meta http-equiv="Cache-Control" content="no-cache" />
十：input设置type=number时，maxlength失效的问题
<input type="number" oninput="checkLength(this ,10)">
function checkLength(obj, length) {
if(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
十一：input设置type=number时，form提交的时候默认给取整的问题
<input type="number" step="0.01" />
input的type为number时，会默认生成上下箭头调整数值，step=0.01,可以允许输入2位小数，点击上下箭头分别增加0.01和减少0.01。
十二：去除input的type为numbe时的默认箭头：
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
十三：IOS键盘字母输入，默认首字母大写
<input type="text" autocapitalize="off" />
十四：IOS键盘，中文输入法输入英文时，字母之间可能会出现一个六分之一空格，可以通过正则去掉
this.value = this.value.replace(/\u2006/g, ‘‘);
十五：IOS下可能对非可点击元素如(label,span)监听click事件，不会触发，加上一行CSS代码即可：
cursor:pointer;
十六：禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
默认情况下，设备会自动识别任何可能是电话号码的字符串
十七：禁止保存或拷贝图像
img{-webkit-touch-callout: none;}
十八：浮动子元素无法撑开父元素高度，给父元素设置：
overflow:hidden;
十九：display:inline-block的元素之间有间距，或者它的父元素高度大于其本身，这是网页默认的空白间距，需要给父元素设置：
font-size:0;
二十：calc的兼容处理，CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div {
width: 80%;
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
}
二十一：设置select 下拉框文字右对齐:
select option {
direction: rtl;
}
二十二：移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
二十三：移动端 HTML5 input date 不支持 placeholder 问题
<input placeholder="txt" type="text" onfocus="(this.type='date')" >
部分Android机型需要点击两次，目前没有想到什么好的办法
二十四：网页适应移动端并禁止网页缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
user-scalable=no和,user-scalable=0效果一样
二十五：apple-mobile-web-app-capable设置Web应用是否以全屏模式运行
<meta name="apple-mobile-web-app-capable" content="yes">
content的默认值是no，表示正常显示。可通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
二十七：实现横屏竖屏的方案
1.使用 css3媒体查询，缺点是宽度和高度不好控制
@media screen and (orientation: portrait) {
.main {
-webkit-transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100vh;
height: 100vh;
/*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
overflow: hidden;
}
}
@media screen and (orientation: landscape) {
.main {
-webkit-transform:rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
}
2.使用js 判断屏幕的方向或者resize事件
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$print = $('#print');
if( width > height ){
$print.width(width);
$print.height(height);
$print.css('top', 0 );
$print.css('left', 0 );
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
}
else{
$print.width(height);
$print.height(width);
$print.css('top', (height-width)/2 );
$print.css('left', 0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}
}, false);
二十八：网页调用Android或者IOS的拨号功能
<a href="tel:110">110</a>
二十九：网页长时间按住页面出现闪退
div{
-webkit-touch-callout: none;
}
三十：CSS动画页面闪白,动画卡顿,启用硬件加速
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
参考链接：
https://www.jianshu.com/p/dc2c4613e60c
https://blog.csdn.net/smile_to_lin/article/details/75349122
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
网友评论