safari对100vh的兼容问题[通俗易懂]

safari对100vh的兼容问题[通俗易懂]需求:在以下的布局要求下,利用flex布局来实现,但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度很自然的利用100vh来控制最外层的高度,但测试过程中,发现safari浏览器中,页面的高度出现了偏差,比屏幕的高度还要高出一部分,出现了双层滚动条。经研究,发现safari的100vh是包含地址栏和功能列的,而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)解决方案通过innerHeight重新定义一个变量代替vhsafariHacks(){letwin

大家好,又见面了,我是你们的朋友全栈君。

需求:在以下的布局要求下,利用flex布局来实现,但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度

在这里插入图片描述

很自然的利用100vh来控制最外层的高度,但测试过程中,发现safari浏览器中,页面的高度出现了偏差,比屏幕的高度还要高出一部分,出现了双层滚动条。

经研究,发现safari的100vh是包含地址栏和功能列的,而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)
在这里插入图片描述

解决方案

通过innerHeight重新定义一个变量代替vh

safariHacks() {
    let windowsVH = window.innerHeight / 100;
    document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
    window.addEventListener('resize', function() {
        document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
    });
}

在mounted内调用该方法
height: 100vh; /*給 Safari 以外的瀏覽器讀取*/
height: calc(var(--vh, 1vh) * 100);

注意–vh要写在100vh下面。。。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139676.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • php通过ini_set调用output_compression压缩网页

    php通过ini_set调用output_compression压缩网页

  • restful api接口规范和服务调用的区别_rest接口规范

    restful api接口规范和服务调用的区别_rest接口规范RESTful发展背景及简介网络应用程序,分为前端和后端两个部分。当前的发展趋势,就是前端设备层出不穷(手机、平板、桌面电脑、其他专用设备…)。因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信。这导致API构架的流行,甚至出现"APIFirst"的设计思想。RESTfulAPI是目前比较成熟的一套互联网应用程序的API设计理论。REST(RepresentationalStat…

  • pycharm pip源修改以及包管理

    pycharm pip源修改以及包管理pycharm下如何将默认的pip源改成国内能快速访问的源,以及如何进行包管理pycharm 是一款进行python项目开发的利器,不过还是有新手在使用pycharm时,并不知道如何进行包管理,pip包管理pycharm 如何进行包管理呢,其实很简答安装安装包流程如下注意2位置,是选择相应版本的py

  • 电容器图片及型号图片_电容电阻图片大全

    电容器图片及型号图片_电容电阻图片大全图1是胆电容;图2是灯具电容器;图3是MKPH电容;图4是MET电容;图5、图10是PEI电容;图6是胆贴片电容;图7是MPE电容;图8是贴片电容;图11是轴向电解电容器;图12是MPP电容。图1是PPN电容;图2是PET电容;图3是MEA电容;图4MPB是电容;图5是PPT电容;图6是MPT电容;图7是电解电容器;图8是MET电容;图9是MKPH电容;图10、11是电机用电容;图12是MKS电…

  • matlab填充图形_不同图案填充条形图

    matlab填充图形_不同图案填充条形图1、下载填充函数:applyhatch.  2、有四种选择:applyhatch,applyhatchplus, applyhatch_plusC , 和 HatchfillpatternsplusColor&Invert,个人感觉后两种更好一些。3、下载以后,放在自己存放m文件的地方,就可以在其他m文件中调用applyhatch***函数了。文件注释里都有

    2022年10月18日
  • 人何以堪

    人何以堪

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号