实现移动端适配或者和响应式布局

more名奇妙

已于 2022-09-24 21:58:07 修改

阅读量1.2k

点赞数 2

分类专栏： CSS JS 文章标签： html 前端 css js

于 2022-09-24 21:52:38 首次发布

本文链接：https://blog.csdn.net/m0_67948827/article/details/127024803

版权

移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。

常规使用，页面可以缩放就用下面的代码

<meta name="viewport" content="width=device-width, initial-scale=1" />

如果不想页面缩放就用下面的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

原理：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.

//获取meta节点
var metaNode = document.querySelector('meta[name=viewport]');
 
//定义设计稿宽度为375

关注