精华内容
下载资源
问答
  • 本来想使用HTML5的canvas做一个手机小游戏,

    本来想使用HTML5的canvas做一个手机小游戏,结果第一步canvas自适应屏幕大小就卡住了:

    <span style="font-size:14px;"><span style="white-space:pre">	</span><span style="white-space:pre">	</span><body style="height: 100%;background-color: blue;">
    		
    	<canvas id="gameCanvas" style=" height: 100%;background-color: red;">
    		您的浏览器不支持HTML5 canvas,请换一个浏览器。
    	</canvas></span>

    本来这段代码也是从网上视频搞到的,但是我发现可能这段代码对于PC浏览器自适应高度有用,但是对于手机就不行了,执行代码效果如下:

    把body背景设为蓝色,canvas背景设为红色,大家可以看到二者并未重叠,canvas左上角和body左上角不重合导致上边和左边留有蓝色空白,而且还有滚动条,使用JS代码获取body的宽高度:

    //获取屏幕宽度与高度

    gWinHeight = document.body.clientHeight;

    gWinWidth = document.body.clientWidth;

    alert(gWinWidth + "," + gWinHeight);

    结果为(304, 486),但是我的iPhone4的屏幕宽度是320,高度是460(算是状态栏是480),但是从计算结果来看,宽高度得到的结果明显都不对,也不知道是怎么计算出来的。

    从网上找了许多资料,一一试过后,可以使用如下办法,解决手机APP自适应屏幕大小的问题:

    <body style="height: 100%;width: 100%;margin: 0;padding: 0;">

    <canvas id="gameCanvas" style=" height: 100%;width: 100%;margin: 0;padding: 0;display: block;">

    您的浏览器不支持HTML5 canvas,请换一个浏览器。

    </canvas>

    展开全文
  • 如何实现自适应屏幕宽高度、超出弹出滚动条  设计网页的过程中,有时需满足不能超出屏幕大小的规则限定,考虑到不停的屏幕有不同的SIZE尺寸。  这么一来我们就需要让它自己获取screen中的宽高度了。( height...

    如何实现自适应屏幕宽高度、超出弹出滚动条


     

        设计网页的过程中,有时需满足不能超出屏幕大小的规则限定,考虑到不停的屏幕有不同的SIZE尺寸。

           这么一来我们就需要让它自己获取screen中的宽高度了。( height width )

     

      情景:

        一般网页内容过多时,右边出现滚动条来进行下滑查看网页内容,当我们一个页面中出现多个模块,页面规定只能显示在

      我们所看屏幕尺寸时(就是不能整体页面滚动),当内容超出时,我们可以设置部分相关的页面模块进行滚动条滑动。

          类似于我们在一个一面中使用到了iframe时,按需求我们只能讲内容显示在iframe中,切不超出当前的页面大小,则

      需要我们使用此方法。

     

    使用 js 来完成这一方法:

     

      

    /*使用JavaScript来实现*/
    
    var  menuHeight = document.getElementById('menu');
    
    var  screenHeight = window.innerHeight  //浏览器窗口的内部高度
    /* var  screenHeight =  document.documentElement.clientHeight; */
    menuHeight.style.height=screenHeight-80+"px";
    
    
    /*使用jQuery来实现*/
    
    /****方法一****/
    $('.menu').height($(window).height()-80);
    
     /****方法二****/
    $('.menu').css("height",$(window).height()-80);

     






    转载于:https://www.cnblogs.com/tao728/p/5945960.html

    展开全文
  • 怎么让Html高度自适应屏幕高度

    万次阅读 多人点赞 2017-04-05 15:36:20
    在写css静态页面的时候让Html高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部。 效果图:CSS的...

    在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部。

    效果图:

    这里写图片描述

    CSS的做法

    html {
      height: 100%;
      display: table;
    }
    
    body {
      display: table-cell;
      height: 100%;
    }

    又学了一种新方法,使用flex布局:

    <div class="container">
      <header></header>
      <content></content>
      <footer></footer>
    </div>
    .container {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    
    header {
      background: #cecece;
      min-height: 100px;
    }
    
    content {
      background: #bbbbbb;
      flex: 1; /* 1 代表盡可能最大,會自動填滿除了 header footer 以外的空間 */
    }
    
    footer {
      background: #333333;
      min-height: 100px;
    }

    JS的做法

    css的做法有时候会在定位的时候造成一些麻烦,可以尝试使用js去动态改变html的高度

    基于zepto
    $(document).ready(function(){
      var windowHeight = $(window).height();
      if($(this).height() < windowHeight){
          $(this).height(windowHeight);
      }
    });
    原生js
    window.onload = function(){
      var winHeight = 0;
      if (window.innerHeight){
        winHeight = window.innerHeight;
      }else if ((document.body) && (document.body.clientHeight)){
        winHeight = document.body.clientHeight;
      }
      var html = document.getElementsByTagName('html')[0];
      if(document.body.offsetHeight < windowHeight){
          html.style.height = windowHeight;
      }
    };
    展开全文
  • [转] HTML 获取屏幕、浏览器、页面的高度宽度 本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。 一、介绍 1. 容器 一个页面的展示,从外到内的容器为:屏幕、浏览器以及页面本身。 HTML元素展现在...

    [转] HTML 获取屏幕、浏览器、页面的高度宽度

    本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。


    一、介绍

    1. 容器

    一个页面的展示,从外到内的容器为:屏幕、浏览器以及页面本身。

    HTML元素展现在页面内,页面展现在浏览器内,而浏览器展现在屏幕内。

    通过Js的一些对象可以获取这些容器的高度、宽度。

     

    2. 物理尺寸和分辨率

    容器的尺寸是指当前分辨率下的高度、宽度,而不是物理高度、宽度。

    如:一个22寸的显示器,屏幕分辨率为1366 * 768,那么获取到的屏幕高度为1366px,宽度为768px。

     

    3. 展示图

     

    二、屏幕信息

    screen.height :屏幕高度。

    screen.width :屏幕宽度。

    screen.availHeight :屏幕可用高度。即屏幕高度减去上下任务栏后的高度,可表示为软件最大化时的高度。

    screen.availWidth :屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度,可表示为软件最大化时的宽度。

    任务栏高/宽度 :可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如:任务栏高度 = screen.height - screen.availHeight 。

     

    三、浏览器信息

    window.outerHeight :浏览器高度。

    window.outerWidth :浏览器宽度。

    window.innerHeight :浏览器内页面可用高度;此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

    window.innerWidth :浏览器内页面可用宽度;此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

    工具栏高/宽度 :包含了地址栏、书签栏、浏览器边框等范围。如:高度,可通过浏览器高度 - 页面可用高度得出,即:window.outerHeight - window.innerHeight。

     

    四、页面信息

    body.offsetHeight :body总高度。

    body.offsetWidth :body总宽度。

    body.clientHeight :body展示的高度;表示body在浏览器内显示的区域高度。

    body.clientWidth :body展示的宽度;表示body在浏览器内显示的区域宽度。

    滚动条高度/宽度 :如高度,可通过浏览器内页面可用高度 - body展示高度得出,即window.innerHeight - body.clientHeight。

    展开全文
  • div的高度随背景图片的高度变化:原理是通过padding-top或者padding-bottom实现,值是背景图片的高比。高度设置为0..newcenter{width:100%;background:url('../../assets/img/newcenter.png')no-repeat;background...
  • html图像和屏幕一样

    千次阅读 2020-01-08 15:44:02
    使html中div内的图片随屏幕大小调节的操作方法为,将div与img的宽度都设置为100%,代码如下: <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title&...
  • js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度常用:JS 获取浏览器窗口大小 12345678910111213141516// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) &amp...
  • css实现容器高度 适应 屏幕高度

    万次阅读 2018-01-31 16:50:17
    &lt;html&gt;元素的高度默认是auto,被内容...的高度屏幕高度自适应,始终充满屏幕,需要从html层开始层层添加height=100% &lt;html&gt;元素没有margin和padding &lt;body&gt;元素有...
  • android 获取屏幕宽

    2016-01-28 10:41:43
    发现项目中有两种获取屏幕宽高的方法: 一、通过WindowManager获取Display,通过display获取Metrics,通过Metrics获取宽高。最后的单位是px。 public static final int getScreenWidth() { Context context = ...
  • html css div自适应屏幕宽度,高度

    千次阅读 2017-10-27 11:55:39
    做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化...DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML>  <TI
  • js得到屏幕宽高、页面宽高 (window.screen.availHeight) window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.availHeight 返回当前屏幕高度(空白空间)  window.screen.width 返回...
  • s = " 屏幕可用工作区高度:" window.screen.availHeight;  s = " 屏幕可用工作区宽度:" window.screen.availWidth; s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";  s = " 你的屏幕设置 " ...
  • JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度 网页可见区域:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域:document.body.offsetWidth ...
  • js获取文本高度屏幕高度

    千次阅读 2018-12-04 17:17:52
    网页可见区域: document.body.clientWidth  网页可见区域高: document.body.clientHeight  网页可见区域: document.body.offsetWidth (包括边线的)  网页可见区域高: document.body.offsetHeight (包括...
  • 获取屏幕宽

    千次阅读 2016-05-11 17:21:56
    屏幕宽高为:”+screen.width+”*”+screen.height; } 其它: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括...
  • 之前写过一个系统是在自己的电脑上调的,页面展示是合适的,但到别人电脑上是很小的一点,看着不是很美观,所以想适配不同的屏幕。 比如在我的电脑上是这样: 在别人电脑上可能是这样(屏幕下方有一大块空白页面)...
  • dom元素高度屏幕高度 获取

    千次阅读 2018-11-05 14:29:44
    JS获取屏幕高度: 网页可见区域: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域(包括边线的): document.body.offsetWidth 网页可见区域高(包括边线的高):...
  • html5屏幕自适应并宽度高度百分百

    千次阅读 2019-03-07 15:32:55
    html中&lt;head&gt;标签中增加下面描述 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; css标签设置html和body为100% html,body{height: ...
  •  最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下。  还是直接上代码吧 <%--...
  • 自适应屏幕高度布局

    千次阅读 2017-08-09 14:28:18
    要达成的效果:按比例自适应浏览器高 方式一:<!DOCTYPE html> <html> <title>test html, body { margin:0; padding:0
  • div自适应屏幕高度

    万次阅读 2017-04-12 14:55:43
    问题描述:本地项目页面左侧菜单点击父亲节点拉伸出子节点后,演示的阴影不能覆盖所有的左侧菜单,现象如...开始考虑的解决方案是div自适应屏幕大小,尝试方案如下: 尝试方案:1.通过css样式修改,设置最小高度 _heig
  • 屏幕适配中,要求应用在不同的屏幕上显示一样的效果时,我们的布局可以采用百分比来定位,也就是 layout_weight,但对于一些层层嵌套或更加复杂的情况下,使用百分比的效果并不是很好,页无法解决一些问题,比如...
  • 浏览器的高示意图: JavaScript中常用的方法: 网页可见区域: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域: document.body.offsetWidth (包括边线的) 网页...
  • 网页可见区域: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域: document.body.offsetWidth (包括边线的)网页可见区域高: document.body.offsetHeight (包括边线的高)...
  • screen.height :屏幕高度。 screen.width:屏幕宽度。 screen.availHeight:屏幕可用高度。即屏幕高度减去上下任务栏后的高度,可表示为软件最大化时的高度。 screen.availWidth:屏幕可用宽度。即屏幕宽度减去左右...
  • 获取浏览器和屏幕各种高度宽度

    万次阅读 2018-06-10 18:08:52
    原生JS ... //网页可见区域(body) document.body.clientHeight; //网页可见区域高(body) document.body.offsetWidth; //网页可见区域(body),包括border、margin等 document.body.offsetHeigh...
  • js或jQuery获取当前屏幕的各种高度

    千次阅读 2019-05-03 16:53:31
    js或jQuery获取当前屏幕的各种高度 一、参考地址: js或jQuery获取当前屏幕的各种高度 jquery监控浏览窗口尺寸变化执行相应的代码 二、 1、Javascript: 网页可见区域: document.body.clientWidt...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,248
精华内容 16,499
关键字:

屏幕宽高度html