前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些 ...

一.怎么让H5页面适应手机 a.利用meta标签 解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放 ...

1.rem 上述代码，便是屏幕适配的整个框架，可以适用手机，平板，电脑。 可以在其中写入自己的代码，以rem为单位（此代码1rem=20px）； 有缩放效果，以px为单位，是绝对值，不会随着屏幕大小的改变，而改变； 以百分比为单位，注意将标签的所有父元素都已百分比为单位，同样 ...

h5 移动端适配方案 设定viewport 打开public\index.html，在html\head结点下加入<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale ...

iphonex 已经上线有一段时间了，作为业界刘海屏幕第一款机型，导致全屏不能正常的全屏显示了，，所以需要对iphonx 适配，下面就详细说说如何适配 先看一张适配前后的图: iphonex 提供的 meta 头 contain 可视化窗口完全包含网页内容 ...

​1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下： △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸： △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI ...

@media (min-width: 320px){html{font-size: 42.6667px;} } @media (min-width: 360px){html{font-size: 48 ...

1. viewport属性及html页面结构 <meta name= "viewport" content="width ...