我对viewport的理解

最新推荐文章于 2022-04-28 11:38:07 发布
最新推荐文章于 2022-04-28 11:38:07 发布
阅读量576 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ISaiSai/article/details/50481897
版权
  • viewport 的width，设定document.documentElement的宽度，如果内容中有超出这个宽度的内容，也会被显示，如果内部又一个div100％ 宽度的时候，就是这个值的宽度
  • 宽当user-scalable为no的时候，整体页面不会缩放，设置minimum－scalable 和maximum-scalable ，initial－scalable 没有什么意义
  • minimum－scalable，和maximum-scalable 似乎有个极限值，超过这个值后不管设置多少缩放，页面都不会更大或者更小
  • 浏览器会记忆当前页面已经缩放了比例，再次进入的时候会使用记忆的那个比例，而不会使用initial－scalable 那个
    值

以上是我的理解，可能有错误，后续会继续完善

ISaiSai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解移动前端开发之viewport
12-02
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...
css实现禁止缩放，避免有些用户放大字号，导致页面布局错乱（maximum-scale=1.0, user-scalable=0）
weixin_45899022的博客
11-25 3645
在meta标签中添加“maximum-scale=1.0, user-scalable=0”两个属性即可禁止页面缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
移动前端开发之viewport的深入理解
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
页面适应电脑和手机屏幕initial-scale 1：0 user-scalable=yes
热门推荐
梁山伯_的博客
09-25 2万+
[html] view plain copy meta name="viewport" content="width=device-width,initial-scale=1">   [html] view plain copy    [html] view plain copy
viewport的理解和使用
mytac的博客
04-04 510
viewport概念 移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。 css中的像素和设备像素的区别 在桌面网页开发时，css中的1px就是设备上的1px；然而css中的1px...
移动前端开发之viewport的深入理解1
08-03
默认情况下，般来讲，移动设备上的viewport都是要于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌电脑来说都较，所以为了能在移动设备上正常显那些传
PyQt(Python+Qt)学习随笔：QAbstractScrollArea的viewPort(视口）理解.rar
09-16
PyQt(Python+Qt)学习随笔：QAbstractScrollArea的viewPort(视口）理解.rar
简单理解Vue条件渲染
11-28
meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset=
移动端布局与响应式开发
KWLShadow的博客
09-03 305
1、移动端布局 1）手机的基本概念 （1）屏幕分辨率 iPhone5的屏幕分辨率为1136×640，指手机的竖排有1136个像素，横排有640个像素。即屏幕像素为72.7万。 并不是屏幕的分辨率越高屏幕越大，屏幕的大小由屏幕的尺寸决定，屏幕的尺寸指屏幕对角线的长度，一般单位为英寸。 （2）物理像素与CSS像素 上面提到的iPhone5的屏幕分辨率指的是物理像素。物理像素的单位为dp（点...
Viewport理解和学习
weixin_34281477的博客
08-07 109
2019独角兽企业重金招聘Python工程师标准>>> ...
viewport理解
路漫漫~
05-02 281
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显
谈谈个人对移动端视口的理解
liwusen的博客
05-30 2897
谈谈对CSS中1px的理解，以及对于CSS的视口的理解
电商七十三、meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewp
lbh19630726的博客
08-14 8771
width：xxxx.html文件的页面可视区域的宽度，值可为数字或关键词device-width。 width=device-width：xxxx.html文件的页面可视区域的宽度，以设备（device）宽度（width）为基数进行缩放。即假设页面实际尺寸是x，后进行缩放，值为z，则把页面实际尺寸缩放后的值z，放进一个宽度为y的框框里面，其中，width=device-width就是y的值。 ...
移动网站屏幕宽度之viewport的深入理解
鼎诚技术团队博客
05-11 237
一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的
视口viewport的理解（布局视口、视觉视口、理想视口）
m0_51636525的博客
04-28 5041
在一个浏览器中，看到的区域就是视口（viewport） 在PC端页面中，不需要对视口进行区分，因为布局视口和视觉视口是同一个
viewport的深入理解
youkino222的博客
04-18 5141
之前写的几篇移动端的知识，然后经过导师的分享，看了荔枝fm的适配，发现自己对viewport的理解并不是很深，于是花了一两天的时间研究viewport和荔枝fm的适配方案。 首先viewport的深入理解，移动前端开发之viewport的深入理解 这篇文章真的讲得很好，很细致 本文文字比较多，因为理论知识比较多，所以希望能够看完，因为本文是参考上面博客和慕课网和各种百度理解之后的总结，看上面博...
什么是前端开发中的viewport
SAP 资深技术专家 Jerry Wang 的技术分享
12-08 580
viewport指代计算机图形学上的多边形(通常是矩形)，代表当前被viewed的区域，即当前位于用户浏览器内处于visible状态的区域。Viewport之外的区域处于不可见状态，直至其被scroll到viewport内为止。 A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it
viewport原理和使用和设置移动端自适应的方法（移动适应电脑）
weixin_42981419的博客
08-08 1412
viewport原理和使用和设置移动端自适应的方法（移动适应电脑） viewport原理和使用和设置移动端自适应的方法 HTML中： &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0...
帮我用godot写一个viewport组件的使用案例
最新发布
09-27
通过理解和熟练掌握Viewport的使用，我们可以创建出更加丰富和出色的游戏或应用程序。 ### 回答3： 好的，下面是一个简单的Godot使用Viewport组件的案例。 首先，在Godot引擎中创建一个新的2D场景。然后，从节点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值