-
-
Save wintercn/3137662 to your computer and use it in GitHub Desktop.
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <!--允许全屏--> | |
| <meta content="yes" name="apple-mobile-web-app-capable"/> | |
| <meta content="yes" name="apple-touch-fullscreen"/> | |
| <!--禁止电话号码和邮箱识别--> | |
| <meta content="telephone=no,email=no" name="format-detection"/> | |
| <!--TODO:添加一个ios用的icon--> | |
| <link rel="apple-touch-icon" href="favicon.png"/> | |
| <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon" /> | |
| <!--TODO:添加一个网页标题--> | |
| <title>A sample of HTML5 game</title> | |
| <!--TODO:改成你想要的缩放比例--> | |
| <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" /> | |
| <style type="text/css"> | |
| html,body { | |
| margin: 0 0 0 0; | |
| padding: 0 0 0 0; | |
| width:100%; | |
| height:100%; | |
| } | |
| body { | |
| -webkit-user-select: none; | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| -webkit-touch-callout: none; | |
| -webkit-text-size-adjust: none; | |
| } | |
| body { | |
| display:-webkit-box; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-pack: center; | |
| -webkit-box-align: center; | |
| text-align:center; | |
| cursor:default; | |
| } | |
| * { | |
| -webkit-text-size-adjust:none; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| //关闭选择 | |
| document.addEventListener("selectstart",function(e){ e.preventDefault(); }); | |
| //避免鼠标变成文本选择形状 | |
| document.addEventListener("mousedown",function(e){ e.preventDefault(); }); | |
| //避免上下滚屏 | |
| document.addEventListener("touchmove",function(e){ e.preventDefault(); }); | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="main" width="400" height="200"></canvas> | |
| <script type="text/javascript"> | |
| //TODO:此处开始编写游戏初始化代码 | |
| var context = document.querySelector("#main").getContext("2d"); | |
| context.fillRect(0,0,400,200); | |
| </script> | |
| </body> | |
| </html> |
var CANVAS_CSS_WIDTH = 400;
var CANVAS_CSS_HEIGHT = 200;
var BACKING_SCALE;
function backingScale(context) {
//新增context.webkitBackingStorePixelRatio，判断是否auto-doubled
if (window.devicePixelRatio > 1 &&
context.webkitBackingStorePixelRatio < 2) {
return window.devicePixelRatio;
}
return 1;
}
function init() {
var canvas = document.getElementById("#main");
var context = canvas.getContext("2d");
BACKING_SCALE = backingStore(context);
canvas.width = BACKING_SCALE * CANVAS_CSS_WIDTH;
canvas.height = BACKING_SCALE * CANVAS_CSS_HEIGHT;
}
< link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-precomposed.png" />
这个不自动给你图标加高光
再来几个
<link rel="apple-touch-startup-image" media="screen and (max-device-width: 1024px) and (orientation: landscape)"
href="images/startup-ipad-landscape.png"/>
<!-- iPad Portrait—768x1004 -->
<link rel="apple-touch-startup-image" media="screen and (max-device-width: 1024px) and (orientation: portrait)"
href="images/startup-ipad-portrait.png"/>
<!-- 320x460 for iPhone 3GS, iPod touch -->
<link rel="apple-touch-startup-image"
media="screen and (max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)"
href="images/startup-iphone.png"/>
<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image"
media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"
href="images/startup-iphone.png"/>
学问很大啊 我擦 感谢大家补充
It's recommend to set the canvas to the size of the full screen to fix pixel to pixel display.
The performance of the canvas will be decreased dramatically if it's scaled om Mobile device.
通常还有这几个 :
body, div {
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
}