再次放大布局时，视图为空 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

移动端H5开发之页面适配篇

一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口1.1 布局视口图片在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，用户可以手动对网页进行放大。...，我们必须让布局视口、视觉视口都尽可能等于理想视口。...由于initial-scale = 理想视口宽度 / 视觉视口宽度，所以我们设置initial-scale=1;就相当于让视觉视口等于理想视口。这样我们就实现了布局视口 = 理想视口。...我们就把页面整体缩放，如果小于750时，就把页面整体放大，缩小和放大的比例，我们通过 window.screen.width / 750 (设计稿大小) 来获取，然后动态的设置到meta标签上。...下图为实现效果图片上面的代码会有一个最大变化的阀值，为designWidth也就是720px，当浏览器窗口的大小超过这个值时，就不再动态变化了，这个可以保证在pc上也能正常显示。

7.6K9 2

【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

如这张某宝的商品放大效果图，左半图为计算机看到的逻辑层画布，上方半透明选框为视口(viewport)，右半图为浏览器窗口，即用户看到的部分。逻辑关系简单清晰。...如图，PC Chrome 中试验，确实如之前解释，放大到 200%后，视口大小缩小了一倍。...（小数点默认四舍五入了）注意：在移动端的浏览器中，对页面手动捏合做放大时，document.documentElement.clientWidth 不会有任何变化。...浏览这类站点时，随着屏幕的缩小，你会看到页面模块的布局结构在伸缩、流动或显隐变化，文字图片等主体内容在布局容器内流动填充、其大小也一直在做梯级变化。...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。

3.1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

彻底搞懂移动Web开发中的viewport与跨屏适配

如这张某宝的商品放大效果图，左半图为计算机看到的逻辑层画布，上方半透明选框为视口(viewport)，右半图为浏览器窗口，即用户看到的部分。逻辑关系简单清晰。...如图，PC Chrome 中试验，确实如之前解释，放大到 200%后，视口大小缩小了一倍。...（小数点默认四舍五入了）注意：在移动端的浏览器中，对页面手动捏合做放大时，document.documentElement.clientWidth 不会有任何变化。...浏览这类站点时，随着屏幕的缩小，你会看到页面模块的布局结构在伸缩、流动或显隐变化，文字图片等主体内容在布局容器内流动填充、其大小也一直在做梯级变化。...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。

3.4K2 0

07-移动端开发教程-移动端视口

由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...如果设置一个元素为100px*100px，看起来就是屏幕的100/320 如果布局视口的宽度=device-width(设备宽度，也就是:物理像素/dpr)时，此时页面100%的宽度正好能在视觉视口中完全显示...理想视口的宽度一般可以通过以下公式计算：理想视口的宽度 = 设备像素 / dpr 也就是当布局视口的宽度等于设备独立像素的宽度时就是理想视口。简单的指定的方法：视口的宽度 / 视觉视口的宽度也就是说当视觉视口的宽度和理想视口的宽度相等时，则就是1。...因为手机端的浏览器会自动设置布局视口的宽度为视觉视口的宽度，所以此时：设备的布局视口==视觉视口==理想视口。

1.5K8 0

07-移动端开发教程-移动端视口

由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...如果设置一个元素为100px*100px，看起来就是屏幕的100/320 如果布局视口的宽度=device-width(设备宽度，也就是:物理像素/dpr)时，此时页面100%的宽度正好能在视觉视口中完全显示...理想视口的宽度一般可以通过以下公式计算：理想视口的宽度 = 设备像素 / dpr 也就是当布局视口的宽度等于设备独立像素的宽度时就是理想视口。简单的指定的方法：视口的宽度 / 视觉视口的宽度也就是说当视觉视口的宽度和理想视口的宽度相等时，则就是1。...视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理不赘述。

1.9K12 0

移动web开发介绍

视口(viewport) 视口（viewport）浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口布局视口(layout viewport) 一般移动设备的浏览器默认设置了一个布局视口...我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 ** 理想视口 (ideal viewport)** viewport设置 <meta name="viewport...750*1334 我们在移动web开发时1px不一定等于1物理像素而在pc页面1px是等于1物理像素的一个px能显示的物理像素点的个数，称为物理像素比或者屏幕像素比如下例定义一个300*300...由于1px不等于1物理像素，如果在手机上显示一张50px*50px的图片，按照上面的情况，物理像素会放大倍数，这样会造成图片的模糊如何解决这种情况？...，但此时不会模糊，因为图片之前就是移动端放大后的大小 img{ width:50px; height:50px; } ...

1.2K1 0

浅谈移动端中的视口（viewport）

如果用户进行了放大，那么一个 CSS 像素还将跨越更多的物理像素。...视觉视口和缩放比例的关系为：当前缩放值 = 理想视口宽度 / 视觉视口宽度所以，当用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。...理想视口（ideal viewport）布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。...定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale [0.0-10.0] 定义放大最大比例，它必须小于或等于maximum-scale...这等于拿一个2倍的放大镜去看图片，图片就会变得模糊。这时，就需要使用 @2x 甚至 @3x 图来避免图片的失真

2.3K2 0

移动 web 开发最佳实践

下图为各种品牌所存在的移动设备的尺寸。...视口（viewport）：视口指的是移动设备中的设备屏幕窗口。在移动端浏览器当中，存在着两种视口，一种是视觉视口（也就是我们说的设备大小），另一种是布局视口（我们要看的网页的宽度是多少）。...先说一下视口的起源，智能设备刚出现的时候，查看桌面端的页面时会出现一个问题：由于早期的页面很多采用固定宽度的布局，导致放在移动端的小窗口下出现横向的滚动条，不便于用户查看，所以浏览器厂商研究出了布局视口...布局视口的宽度一般在768px~1024px（由浏览器厂商设置），常见宽度980px，这样，小屏的移动设备能够一次性完全显示桌面端页面，避免了浏览器出现横向滚动条。...当遇到这种情况时，浏览器会取它们两个中较大的那个值。但为什么要写两个？

3.1K1 0

移动web开发

上面还能选择手机的型号. 02 视口视口(viewport)就是浏览器显示页面内容的屏幕区域.视口可以分成布局视口,视觉视口和理想视口,当然,我们只需要理想视口....布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题....视觉视口 visual viewport 字面意思,他是用户正在看到的网站的区域.注意:是网站的区域我们可以通过缩放去操作视觉视口.但不会影响布局视口,布局视口仍保持原来的宽度....理想视口,对设备来讲,是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 meta...移动端浏览器的技术解决方案当我们PC端写的a链接放到电脑上时,点击的时候会有一个高亮,如何将他去除呢.

2.3K2 1

移动端基础

视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。...是厂商在出厂时就设置好的开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不尽相同一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比...50*50px的图片，直接放到iphone8里，会放大二倍，不清晰，这时采取用一张100*100px的图片，手动缩小为50*50px 准备的图片比实际需要的大二倍，就是二倍图，当然也有3倍4倍图 3.3

2K2 0

关于移动端适配，你必须要知道的

布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。...在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。...当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。...例如：用户将浏览器窗口放大了 200%，这时浏览器窗口中的 CSS像素会随着视觉视口的放大而放大，这时一个 CSS像素会跨越更多的物理像素。...五、1px问题为了适配各种屏幕，我们写代码时一般使用设备独立像素来对页面进行布局。

2.1K1 0

关于移动端适配，你必须要知道的

布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。...在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。...当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。...例如：用户将浏览器窗口放大了 200%，这时浏览器窗口中的 CSS像素会随着视觉视口的放大而放大，这时一个 CSS像素会跨越更多的物理像素。...五、1px问题为了适配各种屏幕，我们写代码时一般使用设备独立像素来对页面进行布局。

1.9K4 1

关于移动端适配，你必须要知道的

布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。...在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。...当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。...例如：用户将浏览器窗口放大了 200%，这时浏览器窗口中的 CSS像素会随着视觉视口的放大而放大，这时一个 CSS像素会跨越更多的物理像素。...五、1px问题为了适配各种屏幕，我们写代码时一般使用设备独立像素来对页面进行布局。

2K2 0

20个 CSS 快速提升技巧

破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。...这个技巧将帮助您避免在加载页面时自动播放视频中的声音干扰访问者，并再次提供了精彩的：not（）伪选择器： video[autoplay]:not([muted]) { display: none...; } 18、灵活运用root类型响应布局中的字体大小应该能够自动调整到视区，从而保存编写媒体查询的工作，以处理字体大小。...可以使用:not和视区单位，根据视区高度和宽度计算字体大小： :root { font-size: calc(1vw + 1vh + .5vmin); } 现在，您可以使用根em单位，该单位基于...19、在表单元素上设置字体大小，以获得更好的移动体验为了避免移动浏览器（iOS Safari等）在点击下拉列表时放大HTML表单元素，请在添加font-size样式： input[type

3.3K2 0

zoom 和 transform: scale(x)

从定义上看 zoom 缩放的是被 zoom 的容器的视口，可以把它想象成放大镜的效果，这个属性是可以继承的（inherited），所以我们做设备屏幕兼容的时候，可以在 body 标签下加一个 div 包裹住页面上的其他元素...大概你也注意到了，在前一句中，我说的是“相似的效果”而不用“一样的效果”，这是因为使用 scale 的时候可能遇到下面这样的问题（左图为 scale，右图为 zoom，两者的缩放值都是 0.85）：...），可以想象成在浏览器中打开了页面，然后放大这个页面的效果： 03.jpg 为什么 scale 会留下那两块迷の白色呢？...但是页面明明是放大的，容器尺寸却变小的问题，还没有找到原因。...还有一个方案是使用 media query 结合 rem （或者百分比）完成这样的布局，不过目前 gaga 不支持 background-size 的 rem，所以要采用什么方式合成雪碧图以及如何生成新的样式

2.2K3 0

探讨移动端适配

1：1 当我们对浏览器窗口放大二倍时，此时视口的宽度为 640 可以看到，视口变小了缩小为原来的两倍因为我们将浏览器放大了两倍，原本1CSS像素就可以显示的地方现在需要2个CSS像素展示，所以视口就自然而然的变小了...要知道我们显示器的物理像素为1280 当浏览器窗口放大两倍时，视口宽度变成了640 与物理像素正好是2倍的关系此时得出结论“ 1CSS像素等于2个物理像素”，这里只是一个单向关系，实际上应该是4个物理像素显示...这是为了让pc端的网页也能在移动端完整展示如果pc端网页超过了980px那么移动端浏览器会对网页进行缩放以正常显示通过结合上面的规律我们得出，视口小于物理像素时，页面展示的元素会放大，视口大于物理像素时元素会缩小...这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好这也就是我们常说的布局视口完美视口（理想视口）默认情况下移动端的像素比为...980/移动端宽度布局视口带来的问题是如果我们直接在网页中编写移动端代码，在980的视口下像素比是非常不友好的也就是 1px =0.几物理像素，这样就会导致网页中的内容非常非常小因此在编写移动端页面时

1.4K1 0

第119天：移动端：CSS像素、屏幕像素和视口的关系

一、视口 1、layout viewport（布局视口）　　一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题...（布局视口）宽度默认值是设备厂家指定的。...网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip...8、vw: 1% 布局视口宽度　　9、vh: 1% 布局视口高度　　10、分辨率：横向物理像素数 * 纵向物理像素数 iPhone5为例物理像素：640 * 1136。屏幕尺寸：4英寸。...布局宽度：布局视口的逻辑像素的数量屏幕宽度：屏幕的逻辑像素的数量（视觉视口、可见视口、虚拟视口）逻辑宽度：逻辑像素的数量视觉宽度：横向长度 chrome 实验结论：桌面浏览器设置viewport

1.7K5 0

【Hello CSS】第三章-浏览器的视图与坐标

下图为显示了“地图”二字的Retina显示屏 ?...下图为喷墨打印机以较低质量在约 0.25 平方英寸的范围内按 150 dpi 打印的效果的特写 ?...设备独立像素(DIP, DP) 设备独立像素(Device Independent Pixels，DIP，又称设备无关像素)是一种物理测量单位，基于计算机控制的坐标系统和抽象像素（虚拟像素），是定义UI布局时使用的虚拟像素单位...offsetLeft: 0, // 视觉视口边缘与布局视口左边的偏移量 offsetTop: 0, // 视觉视口边缘与布局视口顶边的偏移量 onresize: null, //...视觉视口大小变化时触发 onscroll: null, // 滚动视觉视口时触发。

2.4K2 0

vivo悟空活动中台-基于行为预设的动态布局方案

1、问题是什么 1.1、客户端茫茫多，而设计稿只有一个这是移动端H5页面进行布局时面临的核心问题之一。...而前端开发同学在实施样式布局时，就需要能根据设计师的一张设计稿，作出适配各种不同屏幕尺寸、分辨率的效果。...2.1.3、实际视口中的元素缩放行为当实际视口短于基准视口，主要元素大小与基准视口保持不变，次要元素按视口比例缩小；当实际视口长于基准视口，主要元素按视口比例放大，次要元素大小与基准视口保持不变。...2.3、缩放行为目标对于 scaleType 为 zoomIn 的元素，当实际视口高于基准视口时，元素缩放比为视口高度比，元素表现为放大；当实际视口不高于基准视口时，元素缩放比为 1，元素大小保持不变...即当 windowHeightRatio > 1 （实际视口大于基准视口）时，元素 sacle = 1 当 windowHeightRatio 视口大于基准视口）时，元素 sacle =

2.1K1 0

如何提升你的CSS技能，掌握这20个css技巧即可

破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。...这个技巧将帮助您避免在加载页面时自动播放视频中的声音干扰访问者，并再次提供了精彩的：not（）伪选择器： video[autoplay]:not([muted]) { display:...none; } 18、灵活运用root类型响应布局中的字体大小应该能够自动调整到视区，从而保存编写媒体查询的工作，以处理字体大小。...可以使用:not和视区单位，根据视区高度和宽度计算字体大小： :root { font-size: calc(1vw + 1vh + .5vmin); } 现在，您可以使用根em单位...19、在表单元素上设置字体大小，以获得更好的移动体验为了避免移动浏览器（iOS Safari等）在点击下拉列表时放大HTML表单元素，请在添加font-size样式： input[type

5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭