html5设计图的状态栏标准高度,HTML5 canvas自适应手机屏幕宽高度大小

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

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

本来这段代码也是从网上视频搞到的，但是我发现可能这段代码对于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自适应屏幕大小的问题：

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

html5设计图的状态栏标准高度,HTML5 canvas自适应手机屏幕宽高度大小相关推荐

html 自动适应手机屏幕大小,HTML5 canvas自适应手机屏幕大小的一种解决方案
一.最终效果为了不浪费大家时间,先展示最终效果,看看是不是大家需要的解决方案: 标准分辨率: 其他分辨率的适配情况: 二.需求 1.canvas的内容能全部展示在屏幕上 2.尽量能保证图像不变形 3 ...
HTML5 实现图片宽度自适应手机屏幕宽度的CSS
HTML5实现图片自适应手机屏幕页面的css. HTML5写手机页面,读取图片,如果图片大于手机屏幕的宽度,就显示100%屏幕,如果小于,就显示原图. CSS的max-width就能实现了,切不要设置 ...
android设置屏幕高度和宽度设置,Android手机的屏幕宽高度和代码设置控件的宽高度...
1.Android手机的屏幕宽高度 WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE); int w ...
仿比心源码，uniApp自适应手机屏幕高度
仿比心源码,uniApp自适应手机屏幕高度 // 获取屏幕高度用res.screenHeight let _this = this; //uni.getSystemInfoSync异步接口uni.ge ...
HTML5 移动页面自适应手机屏幕四类方法
2019独角兽企业重金招聘Python工程师标准>>> 1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但 ...
HTML5响应式企业集团织梦模板,（自适应手机版）响应式企业集团通用类网站织梦模板 HTML5响应式大气通用企业织梦源码+PC+wap+利于SEO优化...
名称:(自适应手机版)响应式企业集团通用类网站织梦模板 HTML5响应式大气通用企业织梦源码+PC+wap+利于SEO优化该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非 ...
移动页面自适应手机屏幕宽度HTML5开发
网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设 ...
移动页面HTML5自适应手机屏幕宽度几种办法
http://www.mamicode.com/info-detail-864013.html 标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方 ...
移动页面HTML5自适应手机屏幕宽度
http://www.mamicode.com/info-detail-864013.html 标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方 ...

html5设计图的状态栏标准高度,HTML5 canvas自适应手机屏幕宽高度大小

html5设计图的状态栏标准高度,HTML5 canvas自适应手机屏幕宽高度大小相关推荐

最新文章

热门文章