zoukankan      html  css  js  c++  java
  • 移动端底部固定内容

    移动端底部固定内容在屏幕下方,需要兼容不同高度的手机型号,所以固定定位pass,只能让底部的内容,自动撑开,通过控制margin-top的值,来实现不同的高度。而在一部分安卓手机上,获得屏幕分辨率的高度window.screen.height 会有差异,经比较各个手机兼容性问题,document.body.scrollHeight

    比较能够清楚的获得各个手机的高度。 如下例子中,在该机型下(还有一部分安卓会机型出问题),此时两种高度并不相等。

    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 

     1 //(wrong)底部的margin-top
     2 var bottom_height=window.screen.height;
     3 console.log(bottom_height);
     4 var body_height=$('body').height();
     5 var bottom_mt=bottom_height-body_height-21-38;
     6 var bottom_mtstr=bottom_mt+'px';
     7 console.log(bottom_mt);
     8 if(bottom_mt>0){
     9     $('.app_bottom').css('margin-top',bottom_mtstr);
    10 }else{
    11     $('.app_bottom').css('margin-top',0);
    12 
    13 }
    14 //(right)底部的margin-top
    15 var bottom_height=document.body.scrollHeight;
    16 console.log(bottom_height);
    17 var body_height=$('body').height();
    18 var bottom_mt=bottom_height-body_height-21+18;
    19 var bottom_mtstr=bottom_mt+'px';
    20 console.log(bottom_mt);
    21 if(bottom_mt>0){
    22     $('.app_bottom').css('margin-top',bottom_mtstr);
    23 }else{
    24     $('.app_bottom').css('margin-top',0);
    25 
    26 }
  • 相关阅读:
    JavaScript 23 Window
    JavaScript 22 自定义对象
    JavaScript 21 Math
    History 7 : Christianity, Science, and The Enlightenment
    History : The Atlantic Slave Trade
    History 6 : Aztec and Inca Empires / African empires 8001500
    003 几个python编程例子
    006 网络的瓶颈效应
    0212 Logistic(逻辑)回归
    002 用Python打印九九乘法表与金字塔(*)星号
  • 原文地址:https://www.cnblogs.com/xiaoli52qd/p/7207198.html
Copyright © 2011-2022 走看看