一个100x100,单位px的div在苹果6和苹果6p上的大小同样吗?css
单位像素是相对单位html
在一样一个设备上,每1个CSS像素所表明的物理像素是能够变化的(即CSS像素的第一方面的相对性);web
在不一样的设备之间,每1个CSS像素所表明的物理像素是能够变化的(即CSS像素的第二方面的相对性);安全
随着苹果发布更多尺寸的大屏手机,加上Android生态中纷繁复杂的各类奇葩尺寸,移动设计全面进入“杂屏”时代。bash
没有别的缘由,iphone6 只是中型手机的一个表明,从中间尺寸向上和向下适配的时候界面调整的幅度最小。app
var dc = document.documentElement;
var mt = document.createElement("meta");
mt.name = "viewport";
mt.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no";
dc.firstElementChild.appendChild(mt);
var autoSizie = function () {
var dw = dc.clientWidth;
var dpr = Math.min(window.devicePixelRatio, 3);
//dw / dpr > 750 && (dw = 750 * dpr);
window.remScale = dw / 750;
dc.style.fontSize = 200 * (dw / 750) + "px";
dc.dataset.dpr = dpr;
};
autoSizie();
window.addEventListener('resize', autoSizie, false);
复制代码
帧动画在部分机型上抖动问题dom
解决方案:iphone
1.原始尺寸作动画,再用transform:scale()作缩放处理
2.采用svg替代方案,推荐方案svg
div {
width: 10vw;
height: 10vw;
font-size: .12vw;
}
复制代码
这样的页面虽然看起来适配得很好,可是你会发现因为它是利用视口单位实现的布局,依赖于视口大小而自动缩放,不管视口过大仍是太小,它也随着视口过大或者太小,失去了最大最小宽度的限制函数
解决方案:结合rem单位来实现布局
1.给根元素大小设置随着视口变化而变化的 vw 单位,这样就能够实现动态改变其大小。
2.限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度
对屏幕 resize 事件进行监听,当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
$wrapper = document.getElementById("J_wrapper"),
style = "";
if( width >= height ){ // 横屏
style += "width:" + width + "px;"; // 注意旋转后的宽高切换
style += "height:" + height + "px;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: 0 0;";
style += "transform-origin: 0 0;";
}
else{ // 竖屏
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
}
$wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
复制代码
解决横屏的dom适配问题
$vw_base: 375;
$vw_fontsize: 20;
html {
font-size: 20px; //不支持vw单位时,回退到px单位
font-size: ($vw_fontsize / $vw_base) * 100vw;
}
@media screen and (orientation: landscape) {
html {
font-size: 20px;
font-size: ($vw_fontsize / $vw_base) * 100vh;
}
}
复制代码
viewport-fit
iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:
env() 和 constant()
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预约义的变量:
// 须要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。
<meta name="viewport" content="width=device-width, viewport-fit=cover">
// 根据状况设置padding或者margin
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
复制代码
关于移动端适配,就说这么多了。 路漫漫其修远兮,吾将上下而求索···