移动端踩坑指南

[yanlee26]

点击样式闪动

Q: 点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝色边框：outline:none；
-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ; // i.e . Nexus5/Chrome and Kindle Fire HD 7 '' -webkit-tap-highlight-color : transparent ;

屏蔽用户选择

-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除
-webkit-appearance: none;

禁止文本缩放

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

禁止保存或拷贝图像

img{ -webkit-touch-callout: none;}

字体在移动端比例缩小后出现锯齿

-webkit-font-smoothing: antialiased;

input里面placeholder字体的大小

::-webkit-input-placeholder{ font-size:10pt;}

audio元素和video元素在ios和andriod中无法自动播放

$('html').one('touchstart',function(){ audio.play() })

手机拍照和上传图片

Q: 针对file类型增加不同的accept字段
`的accept 属性

` ## 输入框自动填充颜色 ` box-shadow:0 0 0 1000px #fff inset ; -webkit-box-shadow: 0 0 0px 1000px #fff inset; ` ## 硬件加速 > 优化渲染性能 `-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); ` ## 设置字号放大或者缩小导致页面布局错误 ` body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } ` ## 移动端去除type为number的箭头 ` input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } ` ## 实现横屏竖屏的方案 `@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)
}
}
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);

`

iOS 1px border 实现

iOS设备上，由于retina屏的原因，1px 的 border 会显示成两个物理像素，所以看起来会感觉很粗，这是一个移动端开发常见的问题。解决方案有很多，但都有自己的优缺点。从iOS 8开始，iOS 浏览器支持 0.5px 的 border，但是在 Android 上是不支持的，0.5px 会被认为是 0px，所以这种方法，兼容性是很差的。

• 背景渐变
  @mixin commonStyle() { background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top; } @mixin border($border-color) { @include commonStyle(); background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%); } // 这种方法虽然可行，但是没有办法实现圆角。
• 伪类 + transform
  @mixin hairline-common($border-radius) { position: relative; z-index: 0; &:before { position: absolute; content: ''; border-radius: $border-radius; box-sizing: border-box; transform-origin: 0 0; } } @mixin hairline($direct: 'all', $border-color: #ccc, $border-radius: 0) { @include hairline-common($border-radius); &:before { transform: scale(.5); @if $direct == 'all' { top: 0; left: 0; width: 200%; height: 200%; box-shadow: 0 0 0 1px $border-color; z-index: -1; } @else if $direct == 'left' or $direct == 'right' { #{$direct}: 0; top: 0; width: 0; height: 200%; border-#{$direct}: 1px solid $border-color; } @else { #{$direct}: 0; left: 0; width: 200%; height: 0; border-#{$direct}: 1px solid $border-color; } } }
  TODO:...