精华内容
下载资源
问答
  • 本来想使用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>

    展开全文
  • vue如何动态获取浏览器的高度和宽度,对于某些小伙伴来说间直接是简单到不能再简单了,为什么要整理这篇文章呢,源于最近项目中有高度、宽度自适应需求,需要适应不同分辨率的高度及宽度,在不同分辨率下效果区别...

    vue如何动态获取浏览器的高度和宽度,对于某些小伙伴来说间直接是简单到不能再简单了,为什么要整理这篇文章呢,源于最近项目中有高度、宽度自适应需求,需要适应不同分辨率的高度及宽度,在不同分辨率下效果区别不会很大,而我正好带着一位实习生小伙伴,所以把这需求给他让他练练手,结果可想而知了,所以整理这篇文章也是为了给后面的小伙伴提供参考而已,好了废话不多说,直接上源码。

    HTML代码:

    javascript代码:

    export default {

    name: 'App',

    data () {

    return {

    contentStyleObj:{

    height:'',

    width:''

    },

    }

    },

    components:{

    },

    methods:{

    getHeight(){

    // 获取浏览器高度,减去顶部导航栏的值,70该值也可以动态获取

    this.contentStyleObj.height=window.innerHeight-70+'px';

    this.contentStyleObj.width=window.innerWidth-250+'px';

    }

    },

    created(){

    window.addEventListener('resize', this.getHeight);

    this.getHeight()

    console.log(this.contentStyleObj);

    },

    destroyed(){

    window.removeEventListener('resize', this.getHeight)

    }

    }

    效果如下:

    展开全文
  • [转] 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。

    展开全文
  • js、jq获取屏幕宽

    2019-01-26 15:44:00
    参考资料 JS,Jquery获取各种屏幕的宽度和高度 转载于:https://www.cnblogs.com/Grani/p/10323639.html

    参考资料

    JS,Jquery获取各种屏幕的宽度和高度

    转载于:https://www.cnblogs.com/Grani/p/10323639.html

    展开全文
  • 自适应屏幕高度布局

    千次阅读 2017-08-09 14:28:18
    要达成的效果:按比例自适应浏览器高 方式一:<!DOCTYPE html> <html> <title>test html, body { margin:0; padding:0
  • js取得屏幕高与JavaScriptHTML 网页可见区域高: document.body.clientHeight 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文高: document.body.scrollHeight 屏幕分辨率的高...
  • --外层div通过ref获取高度--> <div class="M1container" ref="M1c"> <el-carousel :height="M1Height + 'px'" :interval="2000" > <el-carousel-item v-for="item in 4" :key="item">
  • 今天的第一个任务,就是要让Video的大小能够满屏(适应父级div),换言之要判断高度、宽度,使之能够达到全屏的效果。在过去的一个版本中,我们要想满屏,写了一段长长的js文件,来取高度宽度对比,之后再计算,居中也...
  • 屏幕高度:context.getResources().getDisplayMetrics().heightPixels 屏幕宽度:context.getResources().getDisplayMetrics().widthPixels 转载于:https://www.cnblogs.com/zhaoleigege/p/4988631.html...
  • 一:网页可见区域高,不包括工具栏和滚动条(浏览器窗口可视区域大小) 1.对于IE9+、chrome、firefox、Opera、Safari: window.innerHeight浏览器窗口的内部高度; window.innerWidth浏览器窗口的内部宽度; 2....
  • window.outerWidth : 窗口的整体宽度 window.innerWidth : 窗口的文档显示...window.screen.availWidth : 显示器屏幕的宽度(除 Windows 任务栏之外(底部)),屏幕可用工作区的 window.screenTop : 网页正文部...
  • Vue 页面高度撑满屏幕

    2020-09-06 15:36:43
    html,body,#app{ height: 100%; } 第二步: 网页可见区域:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域:document.body.offsetWidth (包括边线的) 网页可见区域高:...
  • 浏览器的高示意图: JavaScript中常用的方法: 网页可见区域: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域: document.body.offsetWidth (包括边线的) 网页...
  • 一:网页可见区域高,不包括工具栏和滚动条(浏览器窗口可视区域大小)1.对于IE9+、chrome、firefox、Opera、Safari...2.对于IE8.7.6.5:document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度;do...
  • html>body>SCRIPT LANGUAGE="JavaScript">var s = "网页可见区域:"+ document.body.clientWidth;s += " 网页可见区域高:"+ document.body.clientHeight;s += " 网页正文全文:"+ document.body....
  • 网页可见区域:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域:document.body.offsetWidth (包括边线的)网页可见区域高:document.body.offsetHeight (包括边线的)网页...
  • 转载于:http://www.cnblogs.com/liuzijing688/archive/2008/01/12/1035920.html 网页可见区域: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域: document.body....
  • http://www.cnblogs.com/error404/archive/2012/02/05/2339255.html /*--------------------------------- * 绘制图片 * @param x屏幕上的x坐标 * @param y屏幕上的y坐标 * @param w要
  • 今天的第一个任务,就是要让Video的大小能够满屏(适应父级div),换言之要判断高度、宽度,使之能够达到全屏的效果。在过去的一个版本中,我们要想满屏,写了一段长长的js文件,来取高度宽度对比,之后再计算,居中也...
  • 原文地址:http://www.cnblogs.com/tianma3798/p/3715827.html double x = SystemParameters.WorkArea.Width;//得到屏幕工作区域宽度 ...//得到屏幕工作区域高度 double x1= SystemParameters.P...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 175
精华内容 70
关键字:

屏幕宽高度html