（Opera是一个例外，Opera window.innerWidth/Height 不会在用户放大时减小：它们以设备像素为单位进行度量。...以横向为例，看起来被截断了，要显示完整宽度需要视口宽度是400px(物理像素)，这里只有375个物理像素点，故被"截断"。...缩小 初始缩放比为0.5 如果初始缩放比为1，那么布局的宽度就是和视口viewport的宽度是一样的...，请忽略，基本没用过 user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 如何打印视口宽度 PC端 一般讨论视口就是说移动端，和PC端无关，...|| window.innerWidth; 即可获取视口宽度，如果做了视口适配，这个打印出来就是和屏幕宽度一样的值，比如这里的375个CSS像素，如果不做视口适配，这个打印出来就是默认视口宽度(和机型相关
由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...如果设置一个元素为100px*100px，看起来就是屏幕的100/320 如果布局视口的宽度=device-width(设备宽度，也就是:物理像素/dpr)时，此时页面100%的宽度正好能在视觉视口中完全显示...理想视口的宽度一般可以通过以下公式计算： 理想视口的宽度 = 设备像素 / dpr 也就是当布局视口的宽度 等于 设备独立像素的宽度时就是理想视口。 简单的指定的方法： 视口的宽度 / 视觉视口的宽度 也就是说当视觉视口的宽度 和 理想视口的宽度相等时，则就是1。...看一图就明了： 普通屏幕 两倍屏 视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理不赘述。
由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...如果设置一个元素为100px*100px，看起来就是屏幕的100/320 如果布局视口的宽度=device-width(设备宽度，也就是:物理像素/dpr)时，此时页面100%的宽度正好能在视觉视口中完全显示...理想视口的宽度一般可以通过以下公式计算： 理想视口的宽度 = 设备像素 / dpr 也就是当布局视口的宽度 等于 设备独立像素的宽度时就是理想视口。 简单的指定的方法： 视口的宽度 / 视觉视口的宽度 也就是说当视觉视口的宽度 和 理想视口的宽度相等时，则就是1。...视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理不赘述。
2.2.2、元素溢出和页面留白 由于基于 DPR 和 rem 的方案特点是动态适配且对设计稿的精确还原，所以当遇到实际可视区域与设计稿比例不一致的情况，就会出现纵向适配问题： 视口比设计稿“长”时，页面纵向无法填充一屏...2.1.3、实际视口中的元素缩放行为 当实际视口短于基准视口，主要元素大小与基准视口保持不变，次要元素按视口比例缩小； 当实际视口长于基准视口，主要元素按视口比例放大，次要元素大小与基准视口保持不变。...2.3、缩放行为目标 对于 scaleType 为 zoomIn 的元素，当实际视口 高于 基准视口时，元素 缩放比 为视口高度比，元素表现为放大；当实际视口 不高于 基准视口时，元素缩放比为 1，元素大小保持不变...）时，元素 sacle = 1 对于 scaleType 为 zoomOut 的元素，当实际视口 低于 基准视口时，元素 缩放比 为视口高度比（ realH / baseH ），元素表现为缩小；当实际视口...即 当 windowHeightRatio > 1 （实际视口大于基准视口）时，元素 sacle = 1 当 windowHeightRatio 视口大于基准视口）时，元素 sacle =
声明viewport视口 viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。...320PX，但是设备定义了H5页面展示的区域宽度应该是980PX，这样的话要想把H5页面全部进行展示，只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。...user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> width 正整数或device-width 定义视口的宽度...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale...(只对IOS有效) 当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示。
维基百科①的解释为： 在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...同理，当浏览器窗口比较小，而我们想要看到页面下面的内容时，我们需要向下滚动滚动条，浏览器在实现这个的过程中所依赖的，便是视口的下移。...如图，PC Chrome 中试验，确实如之前解释，放大到 200%后，视口大小缩小了一倍。...188px 时，横向刚好铺满屏幕，超过出现横向滚动条 ●scale 倍数越小，视口越大 Q此处插入一个问题： iPhone6S 的 safari 中，不做任何 viewport 设置情况下，默认 initial-scale...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。
Safari，以及国产浏览器。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...当移动端浏览器展示 PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...视觉视口 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。 理想视口 理想视口是指对设备来讲最理想的视口尺寸。...默认值 contain，cover完全填充 在实际开发中，通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。
Safari，以及国产浏览器。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...视觉视口 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。...、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。
[iPhone Safari 的多窗口管理] 而在iPad 上，同样的按钮打开的视图是一个大纲视图，所有的网页窗口平铺展示，就像桌面平台的多窗口管理 [iPad 上 Safari 的多窗口管理] 我们再认真观察一下...Safari 的大纲视图，我们发现除了大纲视图可以进行过度拖动和回弹，双指捏合也可以进行过度缩小并回弹，双指搓开放大某个页面缩略图的时候可以退出大纲视图，聚焦到该缩略图的页面，由此我们猜测这里很可能是一个...这里还有一点小细节，因为捏合过程双指还可以移动，我们实测 Safari 选择最终放大的页面还会根据捏合手势结束之后哪个视图占据目前视口面积较多、距离视口中心最近来决定，和前述标题的变化无关。...frame定位可以根据scrollView 大纲视图的排布来定，然后我们通过设置 scrollView 的 zoomScale和 contentOffset 来使得新 vc 的 view 正好充满整个视口...当从大纲视图回到具体页面，同样可以通过操作 zoomScale和 contentOffset 来使得截图铺满视口，完成后再操作实际 ViewController 的 view 带到视图顶层，再把截图卸载
移动端页面设置视口宽度等于设备宽度，并禁止缩放。...width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 移动端页面设置视口宽度等于定宽...content="telephone=no"> 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式...，可隐藏地址栏，仅针对ios的safari mobile-web-app-capable" content="yes"> safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 mobile-web-app-status-bar-style
视觉视口 视觉视口就是用户可见的区域。 获取方式 注：不缩放的情况下，视觉视口宽度 == 布局视口宽度。 理想视口 宽度与屏幕同宽的布局视口称为理想视口。...理想视口的好处 注意：理想视口不是真实存在的视口 设置理想视口的方法 2-缩放 PC 端 放大时 布局视口变小 视觉视口变小 元素的像素大小不变 缩小时 布局视口变大 视觉视口变大 元素的像素大小不变...移动端 放大时 布局视口不变 视觉视口变小 缩小时 布局视口不变 视觉视口变大 注意：移动端缩放不会影响页面布局 真机测试流程（重点） 真机测试是项目测试必要的一个流程，一定要掌握！！！...minimum-scale = 屏幕独立像素宽度 / 视觉视口 maximum-scale 设置允许用户最大缩放比例，苹果浏览器 safari 不认识该属性 maximum-scale = 屏幕独立像素宽度...touchend 手指从元素上离开时触发 touchcancel 触摸被打断时触发 这几个事件最早出现于IOS safari中，为了向开发人员转达一些特殊的信息。
由于移动设备和桌面设备有不同的屏幕尺寸和分辨率，使用视口可以使网页在不同设备上得到合适的显示。viewport 视口。如果要实现浏览器适配移动端，首先我们要统一标准视口。...从上到下换行；主轴为纵向时：从左到右换列wrap-reverse主轴为横向时：从下到上换行；主轴为纵向时：从右到左换列justify-content：定义了项目在主轴上的对齐方式，属性值作用flex-start...媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定 CSS 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。...下表列举了一些常用的媒体属性：属性作用width表示视口宽度（可加 max min 前缀，表示范围）height表示视口高度（可加 max min 前缀，表示范围）device-width设备宽度（可加...相反，指的是媒体类型大于或等于指定宽度时，样式生效，例如：/*当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
HTML5学堂：随着对移动端的探索，而今我们逐渐形成了“横向百分比，纵向rem”。日前看网易对移动端的操作，发现网易的lofter采用了固定像素进行制作。今天我们就来剖析一下这种方法。...2015.08.19 测试手记：在魅族4当中的内置浏览器进行测试时，无论是我们书写的页面还是网易的lofter页面，都出现了bug问题，主要bug现象如下：当手指滑过部分文字的时候，文字的大小会出问题。...，在视口设置当中，可以通过调整缩放值，控制网页的整体缩放。...在页面顶部添加meta，设置视口信息，将width设置为PSD图的实际宽度（即制作页面时的实际宽度）。但是不需要设置缩放值。...可能的问题 在使用谷歌浏览器进行浏览时，如果横屏后点击刷新，则页面会再缩小，成为居中显示状态，此时再竖屏之后，左右也会留白（此时再刷新是能重新恢复正常）。具体效果如下。 横屏后再刷新的效果： ?
获取到html元素的布局宽度也就是布局视口的宽度，使用媒体查询时 max-width 和 min-width 的值指的也是布局视口的宽。...而在iphone5和iphone6中，当布局视口width=device-width时，css的1px显示出来的是2个物理像素，所以用户看到的是2px的边框。怎么解决呢？...对于可视视口的缩放可以理解为，用户用双指对页面进行缩放，当用户缩小页面时，可视视口变大用户可以看到的东西越多，当用户放大页面时，可视视口变小，用户看到的东西越少。...对于iphone6当添加如上设置后，initial-scale=0.5时。布局视口： 375px * 2 = 750px;所以此时布局视口为750px，此时1px等于1物理像素了。...（设计稿宽度为640px） 这种布局方案页面宽度始终为640px通过设置缩放比例scale实现适配: var scale = window.screen.width / 640; 当设计稿为640px时
网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip...）的宽度设置为 ideal viewport（理想视口）的宽度，initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）...8、vw: 1% 布局视口宽度 9、vh: 1% 布局视口高度 10、分辨率：横向物理像素数 * 纵向物理像素数 iPhone5为例 物理像素：640 * 1136。屏幕尺寸：4英寸。...布局宽度：布局视口的逻辑像素的数量 屏幕宽度：屏幕的逻辑像素的数量（视觉视口、可见视口、虚拟视口） 逻辑宽度：逻辑像素的数量 视觉宽度：横向长度 chrome 实验结论：桌面浏览器设置viewport...以缩小为例 1、viewport的逻辑宽度和视觉宽度初始都为width，逻辑宽度不变，视觉宽度以initial-scale缩小；视觉宽度缩小到跟屏幕一样宽时，不再缩小，变成逻辑宽度变大，视觉宽度不变
通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念 像素是计算机屏幕中显示特定颜色的最小区域。..."> 布局视口使视口与移动端浏览器屏幕宽度完全独立开。...缩放比例关系：当前缩放值 = 理想视口宽度 / 视觉视口宽度 用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值，即当页面第一次 load 的时候缩放比例...dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度 单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性
1.2 视口 image 视口（viewport） 视口一般是指用户访问页面时，当前的可视区域范围。通过滚动条滑动，视口可以显示页面的其他部分。...在 PC 端上， 元素的宽度被设置为 100% 时，等同于视口大小，等同于浏览器的窗口大小。...为了让移动端也能正常显示未适配移动设备的页面，从而引入布局视口和视觉视口的概念。 布局视口（layout viewport） 布局视口的宽度默认为 980px，通常比物理屏幕宽。...CSS 布局会基于布局视口进行计算。移动设备的浏览器基于虚拟的布局视口去渲染网页，并将对应的渲染结果缩小以便适应设备实际宽度，从而可以完整的展示站点内容且不破坏布局结构。.../* 当浏览器宽度至少在 600px 及以上时 */ @media screen and (min-width: 600px) { .hzfe { /* 对 .hzfe 应用某些样式 */
移动端H5知识[系列] - 固定像素的实现方法 HTML5学堂：随着对移动端的探索，而今我们逐渐形成了“横向百分比，纵向rem”。...2015.08.19 测试手记：在魅族4当中的内置浏览器进行测试时，无论是我们书写的页面还是网易的lofter页面，都出现了bug问题，主要bug现象如下：当手指滑过部分文字的时候，文字的大小会出问题。...，在视口设置当中，可以通过调整缩放值，控制网页的整体缩放。...在页面顶部添加meta，设置视口信息，将width设置为PSD图的实际宽度（即制作页面时的实际宽度）。但是不需要设置缩放值。...可能的问题 在使用谷歌浏览器进行浏览时，如果横屏后点击刷新，则页面会再缩小，成为居中显示状态，此时再竖屏之后，左右也会留白（此时再刷新是能重新恢复正常）。具体效果如下。 横屏后再刷新的效果： ?
在使用多种字体时，请记住这一点。 零宽单位： ch 和 rch ch 和 rch 单位基于用于渲染的字体中零字形的宽度或高度进行度量。当文档的内联轴为水平轴时，计算基于其宽度。...视口百分比单位有点难以理解，部分原因是它们基于视口的四个概念： 「UA 默认视口」，可能等于大视口或小视口，或一个中间尺寸 「大视口」，或浏览器界面可缩回部分缩回时的可用尺寸 「小视口」，假定浏览器界面的可缩回部分已展开...「动态视口」，无论浏览器界面是否展开或缩回，动态视口都会存在，并根据可用空间的大小而增大或缩小 image.png 例如，iOS 上的 Safari 浏览器会在你从页面顶部向下滚动时隐藏后退按钮、标签菜单和其他控件...只有当视口本身发生变化时，例如从纵向模式旋转到横向模式时，它们才会发生变化。如果使用 svw 或 svi 单位来确定元素的大小，那么当浏览器界面缩回时，元素的大小不会扩大。...反之，如果使用 lvh 或 lvb 单位，部分内容可能会在浏览器控件展开时被隐藏。 另一方面，动态视口尺寸并不稳定。当方向改变或用户滚动时，它们可能会改变。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议