- 综合排序
- 最热优先
- 最新优先
- 来自专栏gojam技术备忘录
RWD:viewport笔记
示例 <meta name="<em>viewport</em>" content="width=device-width, initial-scale=1"> 含义 visual viewport指的是浏览器可视区域， layout viewport指整个网页区域，包括可视区域外的网页内容。 比如retina屏幕上的像素比是2，那么对css来说，渲染宽度/高度只有物理宽度/高度的一半，四个物理像素对应一个渲染像素。 属性 width 设置layout viewport的宽度，可以取device-width或具体像素值，默认值等于980。 height 设置layout viewport的高度，可以取device-width或具体像素值，默认值与aspect ratio（纵横比）有关。 CSS media query breakpoint 由viewport划定了渲染像素后，CSS媒体查询断点才能工作正常。以下样式表仅对渲染宽度小于等于720的设备有效。
1.6K40发布于 2019-05-14 - 来自专栏信息安全小学生
理解 Viewport
Meta 标签的 viewport 属性告诉浏览器用什么样的尺寸来渲染视窗。 例如： <meta name="<em>viewport</em>" content="width=device-width, initial-scale=1, maximum-scale=1"> 用设备的宽度来定义视窗 改变Viewport的值可以让你定义设备的渲染尺寸。 Viewport的宽度 设置 viewport 的宽度，就像告诉浏览器这就是网页的最佳显示宽度，如果你希望网页在iphone4上得到最佳效果，你可以这样设置： <meta name="<em>viewport</em> ="viewport" content="maximum-scale=1"> Understanding The Viewport
1.3K40发布于 2019-07-22 - 来自专栏centosDai
viewport深入理解和使用
什么是viewport ? viewport是用户网页的可视区域，也可叫做视区。 缩放原理 缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。 因此我们可以得出一个公式： visual viewport宽度 = ideal viewport宽度 / 当前缩放值 当前缩放值 = ideal viewport宽度 / visial viewport 很显然不会是1，因为当 initial-scale = 1 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport ideal viewport）。
1.7K10发布于 2021-09-28 - 来自专栏csxiaoyao
H5 viewport 语法
-- html document --> <meta name="<em>viewport</em>" content=" height = [pixel_value | device-height target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]" /> width & height 控制 viewport 为了防止Android Browser和WebView根据不同屏幕的像素密度对页面进行缩放，可以将viewport的target-densitydpi设置为 device-dpi,页面将不会缩放。 在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。 initial-scale 初始缩放。这是一个浮点值，是页面大小的一个乘数。
1.1K20发布于 2019-02-18 - 来自专栏佳爷的后花媛
零碎之viewport
viewport 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备 然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport 现在我们已经有两个viewport了：layout viewport 和 visual viewport。 ppk把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。 再总结一下：ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport
1.1K40发布于 2018-09-12 - 来自专栏Dimples开发记
移动端适配viewport缩放方案
采用viewport缩放的方案能又快又好的实现需求。 # 2、原理 在写HTML、CSS对设计稿进行还原时不关注屏幕尺寸的差异，而是直接按设计稿的标注来开发。 页面开发好后，在HTML的head标签里加入 <meta name="<em>viewport</em>" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" 之后需要通过JavaScript计算获取屏幕的宽度（假设需要适配逻辑像素宽度是428px的屏幕），在HTML的head里添加<meta name="<em>viewport</em>" content="width=750px 这段代码的意思是：设置布局视口(layout <em>viewport</em>)的宽度为750px（此时页面一般会超出屏幕），再缩放页面（initial-scale）使其恰好撑满屏幕。 # 3、适配代码 <! maximum-scale=${scale}, minimum-scale=${scale}` let meta = document.querySelector('meta[name=<em>viewport</em>
1.7K20编辑于 2022-12-21 - 来自专栏技术博客
ExtJs八(ExtJs Mvc创建ViewPort续)
要在Viewport内为各标签页添加activate事件，就不太符合MVC要求了。是的，这个在顶部实现退出按钮的时候已经违反要求了。因而都需要做出修改。 ) { var me = this; me.callParent(arguments); } }); 使用配置项alias来为组件定义一个别名非常有必要，不然在Viewport 在initComponet方法内，将Viewport创建mainpanel实例的代码复制过来，并修改如下： me.items = [ { title: "文章管理 控制器定义好以后，切换会Viewport.js，先添加一个requires配置项，让其自动加载MainPanel，代码如下： requires: ['ExtMVCOne.view.MainPanel']
4.6K10发布于 2018-09-11 - 来自专栏薛定喵君
移动端viewport属性说明笔记
说说移动端浏览器中的视口 视口(Viewport)是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。 # 布局视口(layout viewport) 指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。 # 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ? # 理想视口(ideal viewport) 布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。 布局视口与理想视口的宽度一致： <meta name="<em>viewport</em>" content="width=device-width"> # 常用的针对移动网页优化过的页面的 viewport meta
1.9K20发布于 2021-01-18 - 来自专栏十月梦想
移动端适配之viewport适配
还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧! 那么这个viewport适配有什么问题呢? 缩放比例 var scalc=1/window.devicePixelRatio; var meta=document.createElement('meta'); meta.name="viewport
1.2K10发布于 2018-08-29 - 来自专栏自动化、性能测试
Cypress系列（40）- viewport() 命令详解
控制浏览器窗口的尺寸和方向 重点 也可以通过在配置项中定义 viewportWidth 和 viewportHeight 来全局设置浏览器窗口的宽度和高度 默认宽高：1000px * 660px 语法格式 cy.viewport (width, height) cy.viewport(preset, orientation) cy.viewport(width, height, options) cy.viewport(preset 重要事项 独立命令 cy.viewport() 后面不能再链接其他命令 自动缩放 默认情况下，如果屏幕不够大，无法显示应用程序所有像素，则 Cypress 会将应用程序缩放并居中，以适应 Cypress 无论屏幕大小如何，测试都始终通过或失败；测试最终在 CI 中运行，因此无论 Cypress 在什么计算机上运行，所有 viewports 都将相同 Cypress.config() 也可以通过此命令来设置全局 viewport
1.5K20发布于 2020-06-23 - 来自专栏技术博客
ExtJs七(ExtJs Mvc创建ViewPort)
appFolder：应用程序的路径，这里是scripts/app autoCreateViewport：默认值为false，在这里要设置为true，让它自动加载\Script\app\View目录下的Viewport.js 在解决方案资源管理器中，在\Script\app\View目录上单击右键添加一个名为Viewport.js的脚本文本。 在文件中需要定义一个从Ext.container.Viewport派生的类，用来搭建应用程序的整体界面。本示例将构建一个类似于Ext JS API的用户界面，分顶部、主区域、底部三部分。 目标明确后，先将新类的框架定义好，代码如下： Ext.define('ExtMVCOne.view.Viewport', { extend: 'Ext.container.Viewport', 在Viewport的items里，把mainpanel添加到原来的代码位置。
9.6K40发布于 2018-09-11 - 来自专栏centosDai
viewport深入理解和使用
什么是viewport ? viewport是用户网页的可视区域，也可叫做视区。 缩放原理 缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。 因此我们可以得出一个公式： visual viewport宽度 = ideal viewport宽度 / 当前缩放值 当前缩放值 = ideal viewport宽度 / visial viewport 很显然不会是1，因为当 initial-scale = 1 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport ideal viewport）。
97930发布于 2021-11-25 - 来自专栏进步博客
利用css @viewport 做设备适配
在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决。但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。 @viewport CSS 规则 使用@viewport规则控制viewport，与使用meta标签的效果相同，只是我们完全使用CSS来控制。 奇怪的是，在viewport小于400px的时候，IE10忽略了viewport meta标签，所以依赖meta标签的站点，在这种小窗口下是没有优化效果的。 @viewport 与 Media Queries配合使用 我们可以在media query里面使用@viewport，已达到更加精准的优化。 @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width
78510发布于 2018-08-01 - 来自专栏移动开发专栏
Horizontal viewport was given unbounded height.width.
Horizontal viewport was given unbounded height. Vertical viewport was given unbounded width. 随便报了一下Horizontal viewport was given unbounded height.异常。 原因就是flutter不知道ListView的高度而导致无法渲染。
1.5K10编辑于 2022-06-10 - 来自专栏蚂蚁开源社区
HTML5 meta viewport参数详解
但是你只有了解了移动设备的meta viewport参数之后，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 ? viewport是什么？通俗的讲，viewport是用户网页的可视区域。 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，具体来说，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大 viewport语法如下： <meta name="<em>viewport</em>" content=" height = [pixel_value | device-height] , width = 的参数详细信息如下： width：控制 <em>viewport</em> 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 在这种情形下，你还需要将<em>viewport</em>的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。
2.6K10发布于 2020-08-26 - 来自专栏coding个人笔记
IntersectionObserver 是否进入了视口（viewport）
是否进入视口的使用场景还是很多的，一般第一时间想到的就是监听滚动，关键是scroll很密集，计算量很大，如果做个防抖节流性能还能优化一些，否则性能问题就很有可能发生。
1.2K20编辑于 2022-06-20 - 来自专栏bug收集
viewport缩放方法，解决移动端自适配
所以决定用 viewport 缩放来试试看效果，经过一些网友的帮忙测试，发现缩放 viewport 这种方法更简单、高效、准确 二、思路： 例如效果图是：750*1334(px)的源文件。 1、根据750 PSD源图 宽度尺寸进行比例缩放，高度并没有限制，所以高度是自由的 2、缩放viewport的同时，宽度跟高度是等比的，所以敢说这种方式比rem更准确。 win) { var maxwidth = 750;//PSD源图 宽度尺寸 var oMeta = document.getElementById('viewport " name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> 注：maximum-scale，minximum-scale ，user-scalable=no 属性的设置，可能会限制缩放效果 总结： 使用缩放 viewport 来做移动端适配确实简单，但在缩放时，有人反应页面会出现糊的情况。
1.3K10编辑于 2022-07-21 - 来自专栏终身学习者
理想的viewport(视口)并不存在
在你依据少数几个严格的断点（breakpoints）来做设计决策之前，确保你已经考虑了屏幕尺寸和浏览器视口的巨大碎片化问题。
77830编辑于 2023-09-19 - 来自专栏coding个人笔记
postcss-px-to-viewport之vw、vh、rem
忘记是哪个大神的文章提到过，lib-flexible有一些问题，建议使用viewport，今天使用一下viewport。 先知道一下viewport的四个单位，vw、vh、vmax、vmin： vw:1vw 等于视口宽度的1% vh:1vh 等于视口高度的1% vmin: 选取 vw 和 vh 中最小的那个 vmax:选取 有点跑偏了，主要想分享postcss-px-to-viewport的使用。 : 5, } } } 配置项有很多，可以自行查看，还能配置不转换之类的： https://github.com/evrone/postcss-px-to-viewport/blob/HEAD 我不知道用rem会有哪些问题，要是我，我还是会使用rem，可能也是因为主观习惯问题，说不定以后有项目用的是viewport，接手之后习惯了就变的真香。
2K30发布于 2021-07-08 - 来自专栏前端逗逗飞
浅谈移动端中的视口（viewport）
而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。 本文主要讨论移动端中的视口。 布局视口（layout viewport） 一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题 视觉视口（visual viewport） 视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ? 用下面的方法可以使布局视口与理想视口的宽度一致： "viewport" content="width=device-width"> 实际上，这就是响应式布局的基础。 2.视口的设置 我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置 "viewport" content="width=device-width,initial-scale
3K20发布于 2021-04-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号