移动端适配的各种问题

原创已于 2024-01-19 10:17:45 修改 · 209 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

于 2023-02-19 12:31:28 首次发布

文章讨论了移动设备上的适配问题，包括不同设备上尺寸的差异，如何利用rem和vw单位进行页面适配，以及处理横屏适配的策略。此外，还介绍了入门网络安全的学习路线，涵盖了网络基础、编程语言、Web安全和安全体系等方面。

适配，你懂适配吗

思考题

一个100x100，单位px的div在苹果6和苹果6p上的大小一样吗？

科普一下

px，单位像素
dp，物理像素
dpr，设备像素比
ppi，每英寸有多少个有用的像素

单位像素是相对单位

在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);

在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);

为什么大部分时候设计稿选择iphone6

随着苹果发布更多尺寸的大屏手机，加上Android生态中纷繁复杂的各种奇葩尺寸，移动设计全面进入“杂屏”时代。

没有别的原因，iphone6 只是中型手机的一个代表，从中间尺寸向上和向下适配的时候界面调整的幅度最小。

移动时代，我们如何做适配的呢

利用 rem 适配页面

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);

为什么是 200 * (document.documentElement.clientWidth / 750) + "px" ？

帧动画在部分机型上抖动问题

解决方案：

1.原始尺寸做动画，再用transform：scale（）做缩放处理2.采用svg替代方案，推荐方案

利用视口单位 vw 适配页面

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;}
}

网页适配 iPhoneX

viewport-fit

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

contain: 可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口
auto：默认值，跟 contain 表现一致

env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

// 需要适配 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 */

关于移动端适配，就说这么多了。路漫漫其修远兮，吾将上下而求索···

网络安全入门学习路线

其实入门网络安全要学的东西不算多，也就是网络基础+操作系统+中间件+数据库，四个流程下来就差不多了。

1.网络安全法和了解电脑基础

其中包括操作系统Windows基础和Linux基础，标记语言HTML基础和代码JS基础，以及网络基础、数据库基础和虚拟机使用等...

别被这些看上去很多的东西给吓到了，其实都是很简单的基础知识，同学们看完基本上都能掌握。计算机专业的同学都应该接触了解过，这部分可以直接略过。没学过的同学也不要慌，可以去B站搜索相关视频，你搜关键词网络安全工程师会出现很多相关的视频教程，我粗略的看了一下，排名第一的视频就讲的很详细。当然你也可以看下面这个视频教程仅展示部分截图：学到http和https抓包后能读懂它在说什么就行。