首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Microsoft Edge处理视口高度与其他浏览器不同

Microsoft Edge是微软开发的一款网页浏览器,它在处理视口高度方面与其他浏览器存在一些差异。

视口高度是指浏览器窗口中可见页面的高度。在大多数浏览器中,包括Chrome、Firefox和Safari,视口高度可以通过JavaScript的window.innerHeight属性来获取。然而,在Microsoft Edge中,获取视口高度的方式略有不同。

在Microsoft Edge中,可以使用document.documentElement.clientHeight属性来获取视口高度。这个属性返回的值与window.innerHeight相同,都表示可见页面的高度。

这种差异可能会对开发人员在编写跨浏览器兼容性代码时产生影响。为了确保在不同浏览器中获得准确的视口高度,开发人员可以使用以下代码来获取视口高度:

代码语言:javascript
复制
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;

这段代码首先尝试使用window.innerHeight来获取视口高度,如果返回undefined(在Microsoft Edge之外的浏览器中可能会发生),则使用document.documentElement.clientHeight来获取。

在实际开发中,了解浏览器的差异是很重要的,特别是在处理视口高度等与页面布局相关的功能时。对于Microsoft Edge浏览器,使用document.documentElement.clientHeight属性可以确保在不同浏览器中获得一致的结果。

腾讯云提供了一系列与云计算相关的产品和服务,包括云服务器、云数据库、云存储等。这些产品可以帮助开发人员构建和部署各种应用程序,并提供高可用性、可扩展性和安全性。更多关于腾讯云的产品和服务信息,可以访问腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【小程序_02】布局方式

移动端主流浏览器处理Webkit内核浏览器即可 (H5C3 支持得相当好) 1.2 常见移动端屏幕尺寸 ? 2. (viewport)就是浏览器显示页面内容的屏幕区域。...可以分为布局、视觉和理想 2.1 布局 (layout viewport) 一般移动设备的浏览器都默认设置了一个布局,用于解决早期的PC端页面在手机上显示的问题。...2.3 理想 (ideal viewport) 为了使网站在移动端有最理想的浏览和阅读宽度而设定理想,对设备来讲,是最理想的尺寸,需要手动添写meta标签通知浏览器操作。...meta标签的主要目的:布局的宽度应该理想的宽度一致,简单理解就是设备有多宽,我们布局的就多宽。...使用 @media查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机

1.3K20

css3自适应布局单位vw,vh详解

在桌面端,指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个:Layout Viewport(布局),Visual Viewport(视觉),Ideal Viewport(理想...单位中的“”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport, “区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight...vh and vw:相对于高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的高度,1vw 等于1/100的宽度。...比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。 vmax相对于的宽度或高度中较大的那个。...vmin相对于的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。 ? vh/vw%区别 ? 请看下面简单的栗子: <!

96411
  • 07-移动端开发教程-移动端视

    2.2 移动端视 在移动端视移动端浏览器屏幕宽度不再相关联,可以比浏览器的可视区域更大或者更小,还可以对页面进行缩放(放大、缩小)。...视觉是用户正在看到的网站的区域,对于的javascript属性是window.innerWidth/Height 2.2.2 布局(layout viewport) 布局:在移动端视移动端浏览器屏幕宽度不再相关联...,不需要缩放查看页面了,而且在不同尺寸下都能基本表现一致,此时的布局的状态我们就称为理想(ideal viewport)。...--这一行代码告诉浏览器,布局的宽度应该理想的宽度一致--> 或者 <meta name...因为手机端的浏览器会自动设置布局的宽度为视觉的宽度,所以此时:设备的布局==视觉==理想

    1.5K80

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

    PC端页面在手机上显示效果 苹果首先在浏览器上引入了的功能,随后各大浏览器都跟随实现。 (viewport)是用户网页的可视区域,也可称之为区。...2.2 移动端视 在移动端视移动端浏览器屏幕宽度不再相关联,可以比浏览器的可视区域更大或者更小,还可以对页面进行缩放(放大、缩小)。...视觉是用户正在看到的网站的区域,对于的javascript属性是window.innerWidth/Height 2.2.2 布局(layout viewport) 布局:在移动端视移动端浏览器屏幕宽度不再相关联...,不需要缩放查看页面了,而且在不同尺寸下都能基本表现一致,此时的布局的状态我们就称为理想(ideal viewport)。...--这一行代码告诉浏览器,布局的宽度应该理想的宽度一致--> 或者 <meta name

    1.9K120

    相对于的CSS自适应单位vw和vh

    在PC端,指的是在PC端,指的是浏览器的可视区域; 而在移动端,它涉及3个:Layout Viewport(布局),Visual Viewport(视觉),Ideal Viewport(...单位中的“”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。  ...vh and vw:相对于高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的高度,1vw 等于1/100的宽度。...比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。 vmax相对于的宽度或高度中较大的那个。...vmin相对于的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。 image.png vh/vw%区别 image.png 请看下面简单的栗子: <!

    1.5K30

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

    initial-scale 一个0.0 到 10.0之间的正数 定义设备宽度(纵向模式下的设备宽度或横向模式下的设备高度大小之间的缩放比率。...这个特性主要被用于移动设备,但是也可以用在支持类似“固定到边缘”等特性的桌面浏览器,如微软的Edge。 按百分比计算尺寸的时候,就是参照的初始(viewport)。...初始指的是任何用户代理和样式对它进行修改之前的。桌面浏览器如果不是全屏模式的话,一般是基于窗口大小。 在移动设备上(或者桌面浏览器的全屏模式),初始通常就是应用程序可以使用的屏幕部分。...属性如下: { height: 936, // 视觉高度,返回值为CSS像素值。...offsetLeft: 0, // 视觉口边缘布局左边的偏移量 offsetTop: 0, // 视觉口边缘布局顶边的偏移量 onresize: null, //

    2.4K20

    【移动端网页布局】flex 弹性布局 ① ( 传统布局 flex 弹性布局 | flex 弹性布局简单使用 | flex 弹性布局下直接为行内元素设置宽高 | flex 弹性布局设置权重 )

    一、传统布局 flex 弹性布局 ---- 传统布局 特点 : 兼容性好 : 可以在 PC 端 / 移动端 , 各种新旧浏览器 中适配的非常好 , 显示效果基本一致 ; 布局繁琐 : 要考虑 标准流..., 兼容性很差 ; 不兼容低版本浏览器 : 在 IE 11 及以下的低版本浏览器中 , 不支持使用 flex 弹性布局 ; 传统布局 flex 弹性布局选择 : PC 端页面 , 推荐使用 传统布局...-- 设置 meta 标签 --> ...-- 设置 meta 标签 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable

    83910

    CSS 尺寸单位概述

    其他字体可能缺少小写 x 字形,或使用阿拉伯语等非拉丁字体。当无法从字体本身确定 x 高度时,浏览器会使用 0.5em 的备选 x 高度。...它们是相对于初始包含块的大小计算的,如果是分页媒体,则是或页面。一个百分比单位等于初始包含块的 1%。这与百分比不同,百分比将尺寸设置为父元素宽度或高度的一定比例。...百分比单位有点难以理解,部分原因是它们基于的四个概念: 「UA 默认」,可能等于大或小视,或一个中间尺寸 「大」,或浏览器界面可缩回部分缩回时的可用尺寸 「小视」,假定浏览器界面的可缩回部分已展开...「动态」,无论浏览器界面是否展开或缩回,动态都会存在,并根据可用空间的大小而增大或缩小 image.png 例如,iOS 上的 Safari 浏览器会在你从页面顶部向下滚动时隐藏后退按钮、标签菜单和其他控件...例如,当浏览器界面影响大小时,高度值为 100dvmax 的元素就会改变大小。 容器相对单位 相对单位适用于浏览器窗口的可用空间,而容器相对单位则是相对于元素的包含上下文的大小来计算的。

    34310

    移动适配的长度单位

    rem单位 效果:屏幕宽度不同,网页元素尺寸不同(等比缩放) px单位或百分比布局对比: px单位是绝对单位 百分比布局特点宽度自适应,高度固定 rem单位是相对单位 rem单位是相对于HTML标签的字号计算结果...作用:可以使用媒体查询, 根据不同宽度, 设置不同的根字号。...less语法是一个CSS预处理器,less文件后缀是.less。扩充了css语言,使css具备一定的逻辑性和计算能力。 注意:浏览器不识别less代码,目前阶段,网页需要引入的还是对应的css文件。...1/100宽度)/vh尺寸 (1/100高度) 查看设计稿宽度 确定参考设备宽度(宽度)/设备高度 (高度) 确定 vw尺寸(1/100宽度)/vh尺寸 (1/100 高度) vw...单位的尺寸=px单位数值/(1/100宽度) 注:在开发中,vw和 vh不会混用,因为 vh是1/100高度,全面屏高度尺寸大,如果混用可能会导致盒子变形。

    1.3K20

    图片懒加载的几种实现方式

    当图片位于浏览器 (viewport) 中时,动态设置 标签的 src 属性,浏览器会根据 src 属性发送请求加载图片。...懒加载的关键是如何判断图片处于浏览器可视范围内,通常有三种方法: 方法一 通过对比屏幕可视窗口高度浏览器滚动距离元素相对文档顶部的距离之间的关系,判断元素是否可见。...item => io.observe(item)) } IntersectionObserver IntersectionObserver 的作用就是检测一个元素是否可见,以及元素什么时候进入或者离开浏览器...的元素执行 getBoundingClientRect 的结果 rootBounds: 对根视图执行 getBoundingClientRect 的结果 intersectionRect: 目标元素...Intersection Observer API 会注册一个回调方法,每当期望被监视的元素进入或者退出另外一个元素的时候(或者浏览器)该回调方法将会被执行,或者两个元素的交集部分大小发生变化的时候回调方法也会被执行

    2.6K20

    【移动端网页布局】移动端网页布局基础概念 ③ ( meta 标签简介 | 利用 meta 标签 设置 网页宽度 是否允许用户缩放 初始缩放比例 最小缩放比例 最大缩放比例 )

    一、meta 标签简介 ---- meta 标签 就是为了移动端而设计的 , 该设置只有在移动端生效 ; meta 标签 用于设置 浏览器 按照 理想 显示页面 ; 使用 meta 标签...通过设置正确的 meta 标签,可以使网页在不同设备上具有相同的理想大小和布局。..."> meta 标签 meta 标签 显示效果 : PC 端浏览器显示效果 :...PC 端浏览器正常显示 ; 移动端浏览器显示效果 : 如果 不设置 meta 标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示... meta 标签 显示效果 : PC 端浏览器显示效果 : PC 端浏览器正常显示 ; 移动端浏览器显示效果

    3.8K21

    长度单位、calc() 表达式

    font-size;若用于其他属性,相对于本身元素的font-size 具有继承的特点 当没有设置font-size时,浏览器会有一个默认的 em 设置:1em = 16px 缺点:容易混乱 <...但不同字体x的高度可能不同。...当无法确定数字0宽度时,取em值的一半作为ch值 兼容性:IE8-不支持 ch在实际中主要用于盲文排版 相关相对长度单位 相关的长度值相对于初始包含块的大小。...然而,当根元素的overflow值为auto时,任何滚动条会假定不存在 兼容性:IE8-不支持,IOS7.1-不支持,android4.3-不支持(对于vmax,所有IE浏览器都不支持) vh 布局高度的...1/100 vw 布局宽度的 1/100 vmin 布局高度和宽度之间的最小值的 1/100 vmax 布局高度和宽度之间的最大值的 1/100 calc() 数学表达式(calculation

    80910

    浏览器之性能指标-LCP

    ❞ 网页的大小取决于「用户设备的屏幕尺寸和浏览器窗口的大小」。在不同的设备上,网页的宽度和高度可能会有所不同。例如,在手机上浏览网页时,网页通常较小,而在台式机或笔记本电脑上则较大。...常见的单位有vw(宽度的百分比)、vh(高度的百分比)、vmin(宽度和高度中较小值的百分比)和vmax(宽度和高度中较大值的百分比)。...---- loading 属性 根据设备的位置关系,Chrome以不同的优先级加载图像。下方的图像以较低的优先级加载,但它们仍在页面加载时被获取。...相反,它将专注于加载口上方的内容,并仅在需要时渲染非关键资源,以加快页面加载过程。 ❞ 使用这种方法,我们的网站可以根据它们的距离异步加载文件。...消除阻塞渲染样式的另一种方法是将这些样式「拆分为不同的文件」,按媒体查询进行组织。然后,为每个样式表链接添加media属性。在加载页面时,浏览器仅会阻塞首次渲染,以检索用户设备匹配的样式表。

    1.5K30

    超越媒体查询:使用更新的特性进行响应式设计

    如果我们按比例制作不同的图片,这种方法就能奏效。这允许浏览器根据屏幕的像素密度和大小来决定下载哪个版本。...浏览器查找媒体查询当前宽度匹配的第一个元素,然后它将显示适当的图像(在srcset属性中指定)。...vw:相对于的宽度 vh:相对于高度 rem:相对于根元素()(默认字体大小通常为16px) em:相对于父元素 %:相对于父元素 同样,大多数浏览器的默认字体大小为16px,这是...如果指定的父元素的大小根元素的大小不同(例如,父元素为18px,但根元素为16px),则em和rem将解析为不同的计算值。 这使我们可以更细粒度地控制元素在不同响应上下文中的响应方式。...vh是高度或可见屏幕高度的首字母缩写。 100vh代表高度的100%(取决于设备)。 同样,vw代表宽度,这意味着设备的可视屏幕宽度,而100vw则代表宽度的100%。

    4.1K10

    web前端常见面试题

    浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。DOCTYPE 可以确保不同浏览器以相同的方式解析文档,以及执行相同的渲染模式。...怪异模式标准模式的主要区别: 怪异模式的宽度和高度会包含 padding 和 border。...就是父级元素字体大小的二倍; rem 当用在根元素()的 font-size 上面时 ,它代表了它的初始值; ch 代表元素所用字体 font 中“0”这一字形的宽度; vh 1vh 相当于高度的...1%,100vh 就是高度; vw 1vw 相当于宽度的 1%,100vw 就是的宽度; vmax 高度 vw 和宽度 vh 两者中的最小值 vmin 高度 vw 和宽度 vh...在点击子元素时,浏览器运行了两种不同的阶段:捕获阶段和冒泡阶段。

    2.3K20
    领券