开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么我的网页在调整浏览器窗口大小时和在移动设备上看起来不一样？

网页在调整浏览器窗口大小时和在移动设备上看起来不一样的原因是因为浏览器窗口大小和移动设备的屏幕尺寸不同，导致页面布局和元素的显示方式发生变化。

具体原因包括：

响应式设计：网页可能采用了响应式设计，即根据不同的屏幕尺寸和设备类型，自动调整页面布局和元素的大小、位置和显示方式。这样可以提供更好的用户体验，但可能导致在不同设备上呈现不同的外观。
视口设置：移动设备上的浏览器通常会使用视口（viewport）来控制页面的显示方式。视口可以设置为固定宽度或自适应宽度，以适应不同的屏幕尺寸。如果网页没有正确设置视口，可能会导致在移动设备上显示异常。
CSS媒体查询：网页可能使用了CSS媒体查询来根据屏幕尺寸和设备类型应用不同的样式。通过使用媒体查询，可以根据浏览器窗口大小或设备类型应用不同的CSS规则，以适应不同的显示环境。
浏览器兼容性：不同的浏览器可能对CSS和JavaScript的解析和渲染方式存在差异，导致页面在不同浏览器上显示不一致。这可能是导致页面在不同设备上呈现不同外观的原因之一。

为了解决这个问题，可以采取以下措施：

使用响应式设计：采用响应式设计的网页可以根据不同的屏幕尺寸和设备类型自动调整布局和元素的显示方式，提供更好的用户体验。
设置正确的视口：在移动设备上，通过设置正确的视口标签，可以确保网页在不同设备上以适当的方式显示。可以使用以下代码设置视口标签：
设置正确的视口：在移动设备上，通过设置正确的视口标签，可以确保网页在不同设备上以适当的方式显示。可以使用以下代码设置视口标签：
使用CSS媒体查询：通过使用CSS媒体查询，可以根据屏幕尺寸和设备类型应用不同的样式，以适应不同的显示环境。例如，可以使用以下代码在不同屏幕尺寸下应用不同的样式：
使用CSS媒体查询：通过使用CSS媒体查询，可以根据屏幕尺寸和设备类型应用不同的样式，以适应不同的显示环境。例如，可以使用以下代码在不同屏幕尺寸下应用不同的样式：
进行跨浏览器测试：在开发过程中，应进行跨浏览器测试，确保网页在不同浏览器上显示一致。可以使用一些跨浏览器测试工具或服务来简化测试过程。

腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云CDN加速：https://cloud.tencent.com/product/cdn
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生容器服务：https://cloud.tencent.com/product/tke
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云游戏多媒体引擎：https://cloud.tencent.com/product/gme
腾讯云音视频处理：https://cloud.tencent.com/product/mps

相关搜索:为什么我的移动网站在移动设备上缩小时看起来很糟糕？为什么我的界面在浏览器和google设备工具栏中看起来不一样？为什么我在Mailchimp中的html模板看起来与我在gmail桌面/移动设备上收到的不同为什么我在此网站上的移动菜单可以在浏览器上使用，但不能在实际的移动设备上使用？为什么我的网页滚动在移动设备上起伏不定，但在笔记本电脑上却可以为什么我的应用程序在不同的设备上看起来不一样，尽管我使用了dp。dp不应该在不同大小的设备上显示相同的吗？c语言纸牌小游戏代码 c语言数组必须初始化 c语言中怎么合并数组 c语言秒转换时间戳

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

布局视口 - Layout ViewPort 指的是在浏览器中，用于显示文档的区域大小和位置。它是指网页中可见部分的大小，即浏览器窗口中显示的内容大小。

03

移动端网页调试

自2019.05.22日离职以来，自己在家浪了两天。然后发现，浪也该浪够了，该收心找下工作了。于是屁颠屁颠的拿起了《在你身边为你设计》这本书看了一下午，看到移动端调试这里，略有感受，于是提取了下内容

03

从零开始学 Web 之移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

02

从零开始学 Web 之 CSS3（八）CSS3三个案例

而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

01

浏览器大战与 JavaScript 的诞生

在 Android 设备或 iPhone 流行之前，浏览器大战的战场是桌面计算机平台。众多公司投入了数十亿美元投身这场战役，而他们的出发点就是基于这样的一个假设：谁统治了桌面浏览器市场，谁就将统治整个互联网。如今，所有网站的全部流量有将近一半来自移动设备；但在 20 世纪 90 年代，网络上的几乎所有活动都是来自台式机的，而绝大多数台式电脑都运行着某个版本的微软 Windows 操作系统。

02

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

03

移动端与PC端页面布局区别、background-size 背景图片的缩放

HTML页面在电脑的浏览器显示跟在手机端的浏览器显示效果是不一样的，下面写个div来示例看看。

02

网页布局的几种方式有哪些_做网页建议用哪种布局

这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。

02

为什么margin、padding和其他间距技术应使用 px 单位

CSS 长度是距离值的一种。CSS 百分比与长度类似，但区别在于它们总是页面中其他内容的一部分，具体取决于它们与什么属性一起使用。长度可以是绝对值，也可以是相对值。

01

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

在上一篇【HelloCSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题：

02

29个前端工程师和设计师必备的Chrome插件

Google Chrome是最好用的几个浏览器之一，自从2011年11月份赶超Firefox之后，已成为当今互联网的主流浏览器。今天，我来分享下自己收集的一系列Chrome插件，希望能够提高大家的工作效率。以下插件均可在Chrome 网上商店中找到。

02

移动端web开发入门笔记

本文介绍了移动端网页开发的一些基础概念，包括HTML、CSS、JavaScript，以及用于移动开发的响应式布局和自适应图片等。同时，文章还探讨了如何通过meta标签和viewport来优化移动端网页的展示效果。最后，还介绍了一些移动端网页开发中常见的问题和解决方法。

09

移动端web开发入门笔记

简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。

01

移动 web 开发最佳实践

01

window对象

窗口大小 outerWidth和outerHeight返回浏览器窗口本身的尺寸。通过document.compatMode来确定页面是否处于标准模式。对于移动设备window.innerWidth和window.innerHeight保存着可见视口，也就是屏幕上可见页面区域的大小。移动IE浏览器不支持这些属性，可以通过document.documentElement.clientWidth和document.documentElement.clientHeight提供相同的信息。如果你在做移动web

Windows 12抢先体验,2.4K Star开源项目,据说是14岁的同行写的

03

图文并茂让你必须弄懂 viewport

简单的说就是你的显示器的分辨率用物理像素描述的，而横向和纵向的分辨率值可以用screen.width/height打印出来。它们是显示器的功能，而不是浏览器的功能。不管窗口放大缩小，screen.width/height是不会变的。（IE7、8是例外，均以CSS像素为单位进行测量）。除非设置分辨率，让LED液晶板重新划分物理像素点，否则就认为分辨率不变。

01

什么是响应式网站？响应式网站建设解决方案

响应式网站完全采用全网3合1建站方式，实现一个后台多种终端兼容展示，所有访问终端统一访问地址，响应式网站建设的解决方案对于多终端的兼容展示是重点，接下来小编为你详细分享什么是响应式网站建设以及实用的解决方案，一起来看看吧。

04

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

上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等，你真的能分清这些概念的意义吗？

01

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

上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等，你真的能分清这些概念的意义吗？

04

响应式设计

给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。网页设计师 Ethan Marcotte 称这种方式为响应式设计（responsive design）。

01

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

上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等，你真的能分清这些概念的意义吗？

02

不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度

尽管一些网页设计工具为按钮等元素指定了 CSS 高度值，但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success Criterion 1.4.4 Resize Text.

01

探秘移动端网页调用摄像头的两种方式

PC 端网页调用摄像头的场景想必大家并不陌生，打开一个网址，开启摄像头开始笔试/视频聊天/直播等。

02

探讨移动端适配

用截图工具（截图工具测得的像素等于物理像素）测得CSS中的1px 的等于物理像素1px的那么他们的比值就是1：1

01

总是听别人说响应式布局，原来这么简单

作者：麻酱原文：http://www.majiang.life/blog/head-first-responsive-web-design/ 前言总听别人说响应式布局，觉得是一个很高大上的东西，

05

第一个.NET小程序

3.最终签核完，生成PDF版的销售合同，且上面自动加盖公司的电子印章，并打印该合同

02

3分钟理解响应式布局

总听别人说响应式布局，觉得是一个很高大上的东西，近日做的一个项目需要适配不同的屏幕尺寸，于是就简单研究了一下 Web响应式布局，其实原理很简单，下面就简单整理了一下分享给大家。

02

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

viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。

03

跨浏览器获取不同环境的window窗口宽度和高度

IE9+、Firefox、Safari、Opera和Chrome均为此提供了4个属性： innerWidth 、 innerHeight 、 outerWidth 和 outerHeight 。

01

BOM核心——window对象之窗口

浏览器对象模型BOM（Browser，Object，Model）是以window对象为基础的，这个对象代表了浏览器窗口，页面可视区域，它还被复用为Es的全局对象Global，所有的原生类型的构造函数和函数都从一开始就存在于这个对象之上。

02

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

viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。

02

详细的聊一聊如何使用响应式图片，提升网页加载速度

确保图片在所有屏幕尺寸上都能良好显示是一项困难的任务，因为你需要考虑图片的大小、图片的放置位置、显示图片的比例、用户连接的速度等等众多因素。结果是，大多数开发者只会为所有屏幕尺寸使用同一张图片，并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法，因为浏览器仍会下载完整尺寸的图片（通常非常大），即使它只以其一部分尺寸显示。这会浪费用户的带宽，并且会显著减慢页面加载速度（尤其是在较慢的连接下）。

03

前端学习笔记—移动端web开发

响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。配合媒体查询监听，通过判断屏幕宽度来改变样式，以适应不同终端。例如：三星电子官网: www.samsung.com/cn/ 缺点:制作麻烦，需要花很大精力去调兼容性问题

01

移动端自适应的常见手段

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview

00

常用的CSS样式

自己平时整理的一些常用的 CSS 样式设置透明度在IE6中使用 filter: alpha(opacity = 40); 在其他浏览器中使用 opacity: 0.4; 设置行高 /*\9表示兼容所有的IE浏览器*/ line-height: 35px\9; 清除浮动 .clearfix:after { content: ''; height: 0; clear: both; overflow: hidden; visibility: hidden;

03

bootstrap笔记（五）——栅格参数

col-md-数字： xs：手机设备大小 sm:平板设备大小 md:笔记本设备大小 lg:台式电脑设备大小数字：代表着在一行12列中所占的单元格数。

04

CSS 布局的本质是什么

自从图形界面操作系统问世以来，之上的应用软件基本都会绘制界面，这也是用户使用软件的接口，叫做 UI （user interface）。涉及到用户体验、设计、具体界面的开发，是软件中和用户最近的一部分，也是多个职能的岗位交集最多的部分。

04

浅谈Web自适应

前言 📷 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta: 简单事情简单做-宽度自适应所谓宽度自适应严格来说是一种

08

CSS 布局的本质是什么

自从图形界面操作系统问世以来，之上的应用软件基本都会绘制界面，这也是用户使用软件的接口，叫做 UI （user interface）。涉及到用户体验、设计、具体界面的开发，是软件中和用户最近的一部分，也是多个职能的岗位交集最多的部分。

04

浅谈web自适应

随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。

04

两个 viewports 的故事-第二部分

原文：A tale of two viewports — part two 译者：nzbin 在这个迷你系列中，我将解释 viewports 和各种重要元素的宽度是如何工作的，比如说 <html> 元素，窗口以及屏幕。我们将在本页讨论移动浏览器。如果你是刚刚接触移动端，我建议你首先阅读关于桌面浏览器的第一部分。这会让你在熟悉的环境中循序渐进。移动浏览器的问题手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。对于一个基于桌面优化的网站，移动浏览器的显示效果明显不如桌面浏览器，要么缩小后

07

面试官：CSS 面试题集锦

z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

03

Css-移动端适配总结前言PC端Mobile总结参考&引用

工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rem\em\css px\device px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~

02

Selenium3 + Python3自

在测试过程中，我们在打开浏览器后，根据需求可自定义调整浏览器的尺寸大小。WebDriver提供了set_window_size()方法来设置浏览器的大小。

01

CSS 布局的本质是什么

自从图形界面操作系统问世以来，之上的应用软件基本都会绘制界面，这也是用户使用软件的接口，叫做 UI （user interface）。涉及到用户体验、设计、具体界面的开发，是软件中和用户最近的一部分，也是多个职能的岗位交集最多的部分。

04

在“小程序”PWA上开发WebRTC

WebRTC面临的最大挑战之一是跨平台提供一致、可靠的支持。对于大多数应用程序，尤其是那些在网络上启动的应用程序，这通常意味着除了支持网络应用程序之外，还需要开发原生或混合移动应用程序。渐进式网络应用程序（PWA）是一种新概念，它能够通过允许基于网络的应用程序在不引入中间混合框架的情况下，看起来并像本地移动应用那样运作，从而将实现应用程序在网络上统一。正如将要讨论的那样，这种方法优点颇多，但它对WebRTC应用程序确实是有意义的吗？

01

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth

03

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 IE，FireFox 差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

01

九张动画图回顾 Web 设计的 25 年历史

Froont，一家为web设计师制作工具的旧金山公司，用9个GIF格式动画来表现网页设计在过去25年的发展历程。如果你想知道为什么CSS这么重要，为什么Flash会逐渐淘汰，这些动画图或许能让你一窥究竟。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭