页面不能缩放以适应移动设备上的视口，无法缩小 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。...一、视口 1、layout viewport（布局视口）　　一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题...iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。...4、无法缩小到文字不能再缩小的程度总结：viewport视觉宽度缩小到屏幕宽度之前，viewport、百分比宽度元素、固定宽度元素，都是逻辑宽度不变，视觉宽度以同等比例缩小。

1.7K5 0

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

视口范围内的图像会以剪切的形式，投影到到世界坐标窗口中，完成图像的可视化展示。在 Web 浏览器中，视口是整个文档的可见部分。如果文档大于视口，则用户可以通过滚动来移动视口。...●在浏览器中，我们可以通过滚动条来移动视口以看到更多网页内容。更形象的视口解释： ?...5.2 自适应设计为了在特定设备上实现最好的用户体验，越来越多的产品，开始针对特定屏幕设计固定的 UI，绝大多数移动端产品都有了区分于 PC 的专门的m站。...不做大的代码调整的话，等比缩放类的移动端网页，在 PC 上的合理展现方式应该是页面总宽度锁定在某个值，然后水平方向居中。（如下图） ?...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。

3.4K2 0

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

是的

没有找到

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

视口范围内的图像会以剪切的形式，投影到到世界坐标窗口中，完成图像的可视化展示。在 Web 浏览器中，视口是整个文档的可见部分。如果文档大于视口，则用户可以通过滚动来移动视口。...●在浏览器中，我们可以通过滚动条来移动视口以看到更多网页内容。更形象的视口解释： ?...5.2 自适应设计为了在特定设备上实现最好的用户体验，越来越多的产品，开始针对特定屏幕设计固定的 UI，绝大多数移动端产品都有了区分于 PC 的专门的m站。...不做大的代码调整的话，等比缩放类的移动端网页，在 PC 上的合理展现方式应该是页面总宽度锁定在某个值，然后水平方向居中。（如下图） ?...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。

3.1K3 0

【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )

它是指网页中可见部分的大小，即浏览器窗口中显示的内容大小。在移动设备上，由于屏幕较小，需要对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...移动设备上的布局视口通常比桌面浏览器中的布局视口小，因为移动设备屏幕的大小通常比桌面屏幕小。..., 压缩到手机屏幕宽度 , 网页中的元素被缩小了 , 用户只能通过手指缩放查看网页内容 ; 2、视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 视觉视口 - Visual Viewport...移动设备浏览器中，设备屏幕较小，页面需要进行缩放以适应屏幕大小，视觉视口会比布局视口小。...一些常用的技术包括响应式设计弹性布局和流体布局使页面在不同设备上自适应地进行布局和排版。

1.3K3 0

IT课程 CSS基础 033_响应式布局

响应式布局响应式布局是一种能够适应不同屏幕尺寸和设备的网页设计方法。通过使用响应式布局，可以使网页在不同的设备上保持良好的显示效果，无论是在桌面电脑、平板电脑还是手机上。...img src="zhaojian.jpg" alt="Responsive Image"> 效果：视口设置使用标签设置视口，以确保页面在移动设备上正确缩放。...，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。...和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。 initial-scale：设定了页面的初始缩放，我们设定为 1。 height：特别为视口设定一个高度。...以保证用户可自行缩小、放大。

1041 0

图文并茂让你必须弄懂 viewport

这在台式机上很烦人，但在移动设备上却很致命）注意：测量的宽度和高度包括滚动条。它们也被视为内部窗口的一部分，这主要是出于历史原因。...视口viewport问题引出移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport...如果有这么一个页面，PC端显示如下，图片大小是200px*200px(CSS像素) 移动端我们打开标尺Show rulers发现，物理视口的物理像素是375px。...我们用下面的图来说说移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），这里是980px。这个是CSS像素。...缩小初始缩放比为0.5 如果初始缩放比为1，那么布局的宽度就是和视口viewport的宽度是一样的

6081 0

移动web开发

布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题....IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....理想视口,对设备来讲,是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 meta...)可以打开移动端,如果是移动设备打开,则跳转移动端页面....响应式兼容PC移动端比如三星官网,通过判断屏幕宽度来改变样式,以适应不同终端. 缺点: 制作麻烦,需要花很大精力去调兼容性问题.

2.3K2 1

响应式设计

除了前面提到的交互菜单，移动版设计主要关注的是内容。在大屏上，可以把页面的大块区域拿来做头部、主图、和菜单。然而在移动设备上，用户通常有更明确的目标。移动版设计就是内容的设计。...千万不要让用户放大页面，才能点中一个小小的按钮或者链接。 # 给视口添加 meta 标签视口的meta标签。这个 HTML 标签告诉移动设备，你已经特意将网页适配了小屏设备。...# 断点的选择不要总想着设备。市面上有成百上千中设备和屏幕分辨率，无法逐一测试。相反，应该选择适合设计的断点，这样不管在什么设备上，都能有很好的表现。...固定容器（比如，设定了 width: 800px 的元素）在小屏上会超出视口范围，导致需要水平滚动条，而流式容器会自动缩小以适应视口。...不仅要让图片适应屏幕，还要考虑移动端用户的带宽限制。图片通常是网页上最大的资源。首先要保证图片充分压缩。还要避免不必要的高分辨率图片，而是否必要则取决于视口大小。

2.1K1 0

java移动端开发_移动端开发

(注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。)...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...好在HTML给我们提供了一个关键字device-width ，该关键是读取当前移动设备的宽度。因此，我们只需要使用下面的代码，即可让所有移动设备的视口宽度和其自身的宽度相等。...其实这就是禁止缩放，在手机端写出的页面将会无法整体左右滑动(当然，想要内部滑动可以自己设置啊)，正常情况下，我们都会应用到上面的那一串代码(在这里说个题外话，我这两天做项目就有一次忘记添加这段代码，结果找半天找不出来原因...这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。注：border边框大小除外 (既然有问题，怎么会没有解决办法呢？

5K2 0

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

仅仅是体力劳动已经完全不能解决问题，我们需要有更高效的办法——制定一套规则，遵循该规则的页面能够在运行时自己去适配所在设备。...2、普适性方案为了实现页面运行时的样式自适应，我们从一开始的静态布局、流式布局、到响应式布局、弹性布局，目前大家普遍采取的方案是使用rem单位的弹性布局，即基于设备像素比（ Device Pixel...，出现底部留白；视口比设计稿“短”时，就会出现页面纵向内容无法一屏显示的问题，即元素溢出。...2.1.3、实际视口中的元素缩放行为当实际视口短于基准视口，主要元素大小与基准视口保持不变，次要元素按视口比例缩小；当实际视口长于基准视口，主要元素按视口比例放大，次要元素大小与基准视口保持不变。...）时，元素 sacle = 1 对于 scaleType 为 zoomOut 的元素，当实际视口低于基准视口时，元素缩放比为视口高度比（ realH / baseH ），元素表现为缩小；当实际视口

2.1K1 0

移动端基础

视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定需手动添写meta视口标签通知浏览器操作...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局混合布局 4.2响应式兼容pc移动端通过判断屏幕宽度来改变样式，以适应不同终端缺点：制作麻烦

2K2 0

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

PC端页面，但是页面缩放后文字会变得非常小，用户需要手动放大缩小才能看清楚，体验非常差。...PC端页面在手机上显示效果苹果首先在浏览器上引入了视口的功能，随后各大浏览器都跟随实现。视口（viewport）是用户网页的可视区域，也可称之为视区。...2.2 移动端视口在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。...由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...布局视口不会受到缩放的影响，缩放不会导致页面重排渲染，对于移动端宝贵的性能来说非常重要。

1.5K8 0

移动 web 开发最佳实践

其中像素比为1的占用4个，像素比为2的占用16个。视口（viewport）：视口指的是移动设备中的设备屏幕窗口。...在移动端浏览器当中，存在着两种视口，一种是视觉视口（也就是我们说的设备大小），另一种是布局视口（我们要看的网页的宽度是多少）。...先说一下视口的起源，智能设备刚出现的时候，查看桌面端的页面时会出现一个问题：由于早期的页面很多采用固定宽度的布局，导致放在移动端的小窗口下出现横向的滚动条，不便于用户查看，所以浏览器厂商研究出了布局视口...那么375像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。说白了，就是把980px的东西装在了375px的屏幕里。用户不用缩放，就能看到整屏的的页面。...但也产生了一个问题，移动端的浏览器同桌面端相比，就是字体过小，但是用户可以手动缩放。后期也产生了根据调整视口宽度（width）和缩放（scale）开发移动端的页面。

3.1K1 0

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

PC端页面，但是页面缩放后文字会变得非常小，用户需要手动放大缩小才能看清楚，体验非常差。...PC端页面在手机上显示效果苹果首先在浏览器上引入了视口的功能，随后各大浏览器都跟随实现。视口（viewport）是用户网页的可视区域，也可称之为视区。...2.2 移动端视口在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。...由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...布局视口不会受到缩放的影响，缩放不会导致页面重排渲染，对于移动端宝贵的性能来说非常重要。

1.9K12 0

什么是移动端开发【重点学习系列—干货十足–一万字详解】

/screen/) CSS 像素 / 逻辑像素位图像素位图和矢量图像素之间的关系像素密度像素比 / N倍屏视口 PC 端移动端布局视口视觉视口理想视口 2-缩放 PC 端移动端真机测试流程...一般移动设备的浏览器都默认定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。视口大小由浏览器厂商决定，大多数设备的布局视口大小为 980px。...理想视口的好处注意：理想视口不是真实存在的视口设置理想视口的方法 2-缩放 PC 端放大时布局视口变小视觉视口变小元素的像素大小不变缩小时布局视口变大视觉视口变大元素的像素大小不变...移动端放大时布局视口不变视觉视口变小缩小时布局视口不变视觉视口变大注意：移动端缩放不会影响页面布局真机测试流程（重点）真机测试是项目测试必要的一个流程，一定要掌握！！！.../ 视觉视口 user-scalable 是否允许用户通过手指缩放页面。

2.6K2 1

我对移动端适配的了解

在手机互联网没有普及前，网络上绝大部分页面都是为电脑端浏览而做的，根本没有做移动端的适配。随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。...所以苹果引入了理想视口，它对设备来说是最理想的布局视口，用户不需要对页面进行缩放就能完美的显示整个页面。最简单的做法就是使布局视口宽度设置为手机屏幕的宽度。移动端到底怎么适配不同的屏幕呢？...对于可视视口的缩放可以理解为，用户用双指对页面进行缩放，当用户缩小页面时，可视视口变大用户可以看到的东西越多，当用户放大页面时，可视视口变小，用户看到的东西越少。...**方案一：固定高度，使其宽度自适应**这也是我接触移动端适配第一次使用的方案。这个方案使用了理想视口,使得布局视口等于设备宽度。...以rem作为宽度单位，固定布局视口。

2.1K3 0

探讨移动端适配

这是为了让pc端的网页也能在移动端完整展示如果pc端网页超过了980px那么移动端浏览器会对网页进行缩放以正常显示通过结合上面的规律我们得出，视口小于物理像素时，页面展示的元素会放大，视口大于物理像素时元素会缩小...这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好这也就是我们常说的布局视口完美视口（理想视口）默认情况下移动端的像素比为...980/移动端宽度布局视口带来的问题是如果我们直接在网页中编写移动端代码，在980的视口下像素比是非常不友好的也就是 1px =0.几物理像素，这样就会导致网页中的内容非常非常小因此在编写移动端页面时... 当然视口的宽度也不能凭我们想象随便设置，每一款移动设备都会有一个最佳的像素比，我们只需设置成该值即可在https...name="viewport" content="375"> 这就是我们的完美视口，移动端有一个最佳的像素比但是我们不能将像素比写死每个设备的像素比都可能不一样，因此一个完美的视口应该是这样

1.4K1 0

移动端开发之Web App开发

2 Viewport视口 2.1 视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页。...这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。...这样会让网页不容易观看，可以用meta标签，name=”viewport”来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。...在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口），这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。...,initial-scale=1.0,user-scalable=no”> 3 移动端适配布局使用百分比自适应布局（流式布局）同时需要对移动端的viewport视口进行设置，就可以达到适配的目的。

2.2K3 0

H5移动端适配原理及方案

移动端页面需要具备响应式设计，以适应不同大小和分辨率的移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术，确保页面在各种设备上都能良好显示。...采用适合移动设备的布局方式，以确保用户在小屏幕上浏览时获得良好的用户体验。...是指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果。由于移动设备和桌面设备有不同的屏幕尺寸和分辨率，使用视口可以使网页在不同设备上得到合适的显示。viewport 视口。...综合起来，这行代码的作用是告诉浏览器，网页的布局应该以设备的宽度为基准，初始缩放级别为 1.0。这样可以确保在移动设备上获得更好的显示效果，而不会出现不必要的缩放或变形。...）是一种用于在容器中进行布局的模型，它使得容器的子元素能够以弹性的方式排列，可以配合 rem 处理尺寸以适应不同屏幕尺寸和设备。

4161 0

【CSS】872- 浅析rem布局方案

一些像素概念物理像素：即实际的每一个物理像素，也就是移动设备上每一个物理显示单元（点）设备逻辑像素（css中的px）：可以理解为一个虚拟的相对的显示块，与物理像素有着一定的比例关系，也就是下面的设备像素比...viewport 三个概念 layout viewport visual viewport ideal viewport layout viewport 最开始，pc上的页面是无法再移动端正常显示的，因为屏幕太小...，会挤作一团，所以就有了viewport的概念，又称布局视口（虚拟视口），这个视口大小接近于pc，大部分都是980px visual viewport 有了布局视口，还缺一个承载它的真是视口，也就是移动设备的可视区域...一个特性 viewport有六种可以设置的常用属性： width：定义layout viewport的宽度，如果不设置，大部分情况下默认是980 height：非常用 initial-scale：可以以某个比例将页面缩放...user-scalable：是否允许用户放大\缩小页面，默认为yes rem适配方案先说原理，通过meta修正1px对应的物理像素数量，在根据统一的设计稿来生成html上的动态font-size，根据

8422 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭