跳转到帖子
  • 游客您好,欢迎来到黑客世界论坛!您可以在这里进行注册。

    赤队小组-代号1949(原CHT攻防小组)在这个瞬息万变的网络时代,我们保持初心,创造最好的社区来共同交流网络技术。您可以在论坛获取黑客攻防技巧与知识,您也可以加入我们的Telegram交流群 共同实时探讨交流。论坛禁止各种广告,请注册用户查看我们的使用与隐私策略,谢谢您的配合。小组成员可以获取论坛隐藏内容!

    TheHackerWorld官方

html5里面怎样自动适应手机屏幕的高度


NedK7

推荐的帖子

在拥有个人中心类型的网站中,无论是响应式还是手机版都绕不过一个尴尬的问题,那就是内容区无法撑起手机一屏高度。

为此我整理了两种简单的方法来让页面最小高度为一屏高度。

 

一、利用jq/js获取高度计算

 

1917308-20210117134914978-584257771.png

 

 

首先一个页面可以分为三个区域,头部区,主体内容区,底部区。

头部区域一直浮动在顶部,和底部区域一样高度不会变化。所以我们只需要获取到屏幕高度然后减去头底部高度就是内容区域的最小高度。

        $(function(){             var winH = $(window).height(); //获取当前视口高度             var htmlH = $(document).innerHeight(); //获取当前html高度             var headerH = $('header').innerHeight(); //获取当前头部高度             var footerH = $('footer').innerHeight(); //获取当前底部高度             if(htmlH < winH){  //进行判断                 $('main').height(winH - headerH - footerH); //设置主体内容高度             }         })

这样就可以通过jq让所有页面最小高度不会小于手机一屏,js同理使用相同的逻辑即可。

 

二、利用css中vh单位

vh是css规定的一种视口单位,1vh等于视口高度的1%。

 

所以我们通过css的计算方法calc就可以轻松设置内容区域的最小高度了。不过需要注意的是无论是calc还是vh都对于低版本的浏览器不支持,所以要兼容低版本的话还是选择js会更为方便。

<style>     .header{         height: 100px;     }     .footer{         height: 100px;     }     main{         min-width: calc(100vh - 200px); //注意空格,没有空格会影响到ie部分兼容     } </style>   在不考虑低版本ie兼容下个人比较推荐第二种,毕竟js会浪费部分性能,能用css解决的效果和问题尽量不要使用js。

链接帖子
意见的链接
分享到其他网站

黑客攻防讨论组

黑客攻防讨论组

    You don't have permission to chat.
    • 最近浏览   0位会员

      • 没有会员查看此页面。
    ×
    ×
    • 创建新的...