更新于 2016/11/3
- meta标签
- 使用click会出现绑定点击区域闪一下的情况
- 当前点击元素样式
- 消除transition闪屏
- iphone下给除body外的元素添加滚动条滚动效果
- 设备像素比(device pixel ratio )
- 移动端多屏兼容处理方案
meta标签
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
- 第一个meta标签表示文档的宽度为设备的宽度，强制缩放比例为1，且用户不可更改；
- 第二个meta标签表示允许全屏模式浏览（safari私有）；
- 第二个meta标签指定safari顶端状态条的样式（safari私有）；
- 第四个meta标签告诉设备忽略将页面中的数字识别为电话号码；
使用click会出现绑定点击区域闪一下的情况：
- 添加如下属性即可解决：
-webkit-tap-highlight-color: rgba(0,0,0,0);
当前点击元素样式：
-webkit-tap-highlight-color: 颜色
消除transition闪屏:
-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
iphone下给除body外的元素添加滚动条滚动效果：
body{
-webkit-overflow-scrolling: touch;
}
设备像素比(device pixel ratio )：
这里以iphone6做为参考：
// 设备像素比：
dpr = window.devicePixelRatio; // => 2
// 手机屏幕宽高（设备独立像素/逻辑像素）：
width = screen.width; // => 375
height = screen.height; // => 667
// 物理像素 = 设备独立像素 * 设备像素比
750 = 375 * 2（ 在某一方向上，x方向或者y方向）
移动端多屏兼容处理方案：
1.移动端flexible.js多屏兼容处理：
/*eslint no-unused-vars: 0 */
(function(win, lib) {
var doc = win.document
var docEl = doc.documentElement
var metaEl = doc.querySelector('meta[name="viewport"]')
var flexibleEl = doc.querySelector('meta[name="flexible"]')
var dpr = 0
var scale = 0
var tid
var flexible = lib.flexible || (lib.flexible = {})
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例')
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
if (match) {
scale = parseFloat(match[1])
dpr = parseInt(1 / scale)
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content')
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
if (initialDpr) {
dpr = parseFloat(initialDpr[1])
scale = parseFloat((1 / dpr).toFixed(2))
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1])
scale = parseFloat((1 / dpr).toFixed(2))
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi)
var isIPhone = win.navigator.appVersion.match(/iphone/gi)
var isIPhone_9_3 = isIPhone && win.navigator.appVersion.match(/OS 9_3/)
var devicePixelRatio = win.devicePixelRatio
if (isIPhone && ! isIPhone_9_3) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2
} else {
dpr = 1
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1
}
scale = 1 / dpr
}
docEl.setAttribute('data-dpr', dpr)
if (!metaEl) {
metaEl = doc.createElement('meta')
metaEl.setAttribute('name', 'viewport')
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl)
} else {
var wrap = doc.createElement('div')
wrap.appendChild(metaEl)
doc.write(wrap.innerHTML)
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = 540 * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
win.addEventListener('resize', function() {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}, false)
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}
}, false)
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px'
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px'
}, false)
}
refreshRem()
flexible.dpr = win.dpr = dpr
flexible.refreshRem = refreshRem
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px'
}
return val
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem'
}
return val
}
})(window, window['lib'] || (window['lib'] = {}))
2.flex布局：
2016-04-19 微信官方发布消息，Android x5 内核 已升级到 Blink ，可以愉快地写 flex 了
这是一个很好的多屏解决方案，可惜pc端兼容不太好。
未完，待续...
