2020.02.19
1623
老余
meta对于移动端的一些特殊属性，可根据需要自行设置
<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转 <meta name="full-screen" content="yes"> //全屏显示 <meta name="browsermode" content="application"> //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。 <meta name="x5-orientation" content="portrait"> //QQ强制竖屏 <meta name="x5-fullscreen" content="true"> //QQ强制全屏 <meta name="x5-page-mode" content="app"> //QQ应用模式 复制代码
在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
关闭识别
<meta name="format-detection" content="telephone=no" /> 复制代码
开启识别
<a href="tel:123456">123456</a> 复制代码
安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别：
<meta content="email=no" name="format-detection" /> 复制代码
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> 复制代码
移动端 H5 项目越来越多，设计师对于 UI 的要求也越来越高，比如 1px 的边框。在高清屏下，移动端的 1px 会很粗。
那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。
下面介绍最常用的方法
/* 底边框 */
.b-border {
position: relative;
}
.b-border:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #d9d9d9;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* 上边框 */
.t-border {
position: relative;
}
.t-border:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background: #d9d9d9;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* 右边框 */
.r-border {
position: relative;
}
.r-border:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 1px;
height: 100%;
background: #d9d9d9;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* 左边框 */
.l-border {
position: relative;
}
.l-border:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 1px;
height: 100%;
background: #d9d9d9;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* 四条边 */
.setBorderAll {
position: relative;
&:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
} 复制代码
禁止用户选择页面中的文字或者图片
div { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
} 复制代码
在 iOS 上，输入框默认有内部阴影,以这样关闭：
div { -webkit-appearance: none;
} 复制代码
代码如下
img { -webkit-touch-callout: none;
} 复制代码
设置 input 里面 placeholder 字体的颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #c7c7c7;
} input:-moz-placeholder, textarea:-moz-placeholder { color: #c7c7c7;
} input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #c7c7c7;
} 复制代码
设置字体禁止缩放
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important;
} 复制代码
部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
} 复制代码
ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。
解决方案
.wrapper { -webkit-overflow-scrolling: touch;
} 复制代码
body { overflow-y: hidden;
} .wrapper { overflow-y: auto;
} 复制代码
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。解决方案：
触摸事件的响应顺序
这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。加入自动触发播放的代码
$('html').one('touchstart', function() {
audio.play()
}) 复制代码
手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。
在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。
解决方案
document.body.addEventListener( 'touchmove', function(e) { if (e._isScroller) return // 阻止默认事件 e.preventDefault()
},
{ passive: false }
) 复制代码
将日期字符串的格式符号替换成'/'
'yyyy-MM-dd'.replace(/-/g, '/') 复制代码
window.addEventListener('resize', function() { if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { window.setTimeout(function() { if ('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(false)
} else { document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
}) 复制代码
IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件
定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改
FastClick.prototype.focus = function(targetElement) { var length if (
deviceIsIOS &&
targetElement.setSelectionRange &&
targetElement.type.indexOf('date') !== 0 &&
targetElement.type !== 'time' &&
targetElement.type !== 'month' ) {
length = targetElement.value.length
targetElement.setSelectionRange(length, length)
targetElement.focus()
} else {
targetElement.focus()
}
} 复制代码
通过监听键盘回落时间滚动到原来的位置
window.addEventListener('focusout', function() { window.scrollTo(0, 0)
}) //input输入框弹起软键盘的解决方案。 var bfscrolltop = document.body.scrollTop
$('input')
.focus(function() { document.body.scrollTop = document.body.scrollHeight //console.log(document.body.scrollTop); })
.blur(function() { document.body.scrollTop = bfscrolltop //console.log(document.body.scrollTop); }) 复制代码
软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。
解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll
<body> <div class='warper'> <div class='main'></div> <div> <div class="fix-bottom"></div> </body> 复制代码
.warper { position: absolute; width: 100%; left: 0; right: 0; top: 0; bottom: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */ } .fix-bottom { position: fixed; bottom: 0; width: 100%;
}
028-86040068
联系我们
