【移动端适配视口viewport】移动端meta属性设置的理想视口是什么

1、看一下我的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--<meta name="viewport" content="initial-scale=0.33,maximum-scale=0.33,minimum-scale=0.33,user-scalable=no">--><!--<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">--><!--<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">--><!--<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">--><title>Title</title>
</head>
<body>
</body>
</html>
<script>console.log(document.documentElement.getBoundingClientRect().width)
</script>

2、首先看什么都不设置直接打印console.log(document.documentElement.getBoundingClientRect().width)这个是获取视口的宽度的。看到iphone下视口是980，这是浏览器厂商设置的。

2、然后看理想视口呢？发现是375，这个是iphone的css屏幕宽度375，所以理想视口下，屏幕宽度就等于视口宽度，因此移动端适配的时候一般设置成理想视口模式ideal viewport

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

3、设置成0.5缩放比例，发现视口变成了750

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

4、设置成0.3333之后呢？视口大小变成了屏幕的3倍，也就是常说的2倍屏，3倍屏。

其他的layout viewport 、 visual viewport，you can find in移动前端开发之viewport的深入理解

【移动端适配视口viewport】移动端meta属性设置的理想视口是什么相关推荐

layui移动端适配_web前端-移动端适配方案
三微授渔,授你以渔一般情况下吗,设计稿的设计师按照 375 的尺寸设计,在手机(移动端)快速更新迭代的今天,每个品牌的手机都有着不同的物理分辨率和逻辑分辨率,此时 375 的设计稿,如果想要还原那基 ...
【移动端适配一】移动端Web页面的ios安全区适配
背景从苹果手机 iphoneX 发布之后,前端人员在开发移动端Web页面时,得多注意一个对 IOS 所谓安全区域范围的适配.这其实说白了就是 iphoneX 之后的苹果手机,在页面上,你需要对顶部和 ...
移动端布局三种视口_前端基础：必须要知道的移动端适配（4）——视口
视口(viewport)代表当前可见的计算机图形区域.在Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等--即指你正在浏览的文档的那一部分. 一般我们所说的视口共包括三种:布 ...
viewport在pc端是否生效_viewport移动端适配
提到viewport移动端适配,那么心中可能有几个疑问? 1.为什么要进行移动端的适配? 2.viewport是什么? 3.如何进行移动端适配? 一.移动端适配的目的: 通常我们在pc上看到的页面都是 ...
移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
移动端适配方案(上)
转载自:https://github.com/riskers/blog/issues/17 要搞懂移动端的适配问题,就要先搞明白像素和视口. 像素在移动端给一个元素设置 width:200px 时发 ...
小小Mac:Web移动端适配方案
一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
关于移动端适配，你必须要知道的
关于移动端适配,你必须要知道的关于移动端适配,你必须要知道的分享一款前端实用的面试题小程序建议收藏,微信搜索 MST题宝库移动端适配,是我们在开发中经常会遇到的,这里面可能会遇 ...
前端CSS移动端适配
导读移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... 上面这些问题可能我们在开发中 ...

【移动端适配视口viewport】移动端meta属性设置的理想视口是什么

【移动端适配视口viewport】移动端meta属性设置的理想视口是什么相关推荐

最新文章

热门文章

【移动端适配 视口viewport】移动端meta属性设置的理想视口是什么

【移动端适配 视口viewport】移动端meta属性设置的理想视口是什么相关推荐

最新文章

热门文章

【移动端适配视口viewport】移动端meta属性设置的理想视口是什么

【移动端适配视口viewport】移动端meta属性设置的理想视口是什么相关推荐