<!DOCTYPE html>
<html>
head中的大部分标签都是用于说明一些显示的属性,如果是手机网页则需要设置这些,如果是普通网页应用则不必设置。
<head>
告诉浏览器此页面属于什么字符编码格式,gb2312不包含繁体,gbk包含繁体,
<meta charset="utf-8">
网页标题
<title>Cocos2d-html5 Hello World test</title>
设置标题前的小图标,
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
在移动浏览器中,window对象有一个devicePixelRatio属性=物理像素/独立像素,css中的px就可以看做是独立像素,所以通过此属性,可以知道该设备上一个css像素代表多个物理像素。在做移动端开发时,为了使移动端的页面在不同的手机上同样的大小来显示,我们可以将页面的宽度固定,然后获取设备的宽度,可以得到我们之前设定的宽度和设备宽度的比例,再使用HTML5新增的viewport来对页面进行缩放,并固定不允许用户再重新缩放。
width表法网页大宽度,device-width表示设备宽度,user-scalable表示是否允许用户进行缩放,initial-scale设置页面的初始缩放值,minimum-scale允许用户的最小缩放值,maximum-scale表示允许用户的最大缩放值。
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>
<!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
为no表示正常显示工具栏和菜单栏,yes为不显示
<meta name="apple-mobile-web-app-capable" content="yes">
default表示白色,black , black-translucent表示灰色半透明
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
手机号码不被显示为拨号链接
<meta name="format-detection" content="telephone=no">
国内的主流浏览器都是双核浏览器,基于webkit内核用于常用网站的高速渲染,基于IE的内核用于兼容网银、旧版网站,指定使用的内核。
webkit是一个开源的浏览器引擎(Chrome),与之对应的引擎有Gecko(Firefox)
<!-- force webkit on 360 -->
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页。
模式Edge模式就是什么版本IE就用什么版本的标准模式渲染。
chrome=1表示IE使用Chrome Frame渲染,前提需要安装了google 内嵌浏览器框架
<!-- force edge on IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
禁止链接高亮
<meta name="msapplication-tap-highlight" content="no">
<!-- force full screen on some browser -->
<meta name="full-screen" content="yes"/> UC全屏
<meta name="x5-fullscreen" content="true"/> QQ全屏
<meta name="360-fullscreen" content="true"/> 360全屏
<!-- force screen orientation on some browser -->
<!-- <meta name="screen-orientation" content="portrait"/>
<meta name="x5-orientation" content="portrait"> -->
应用模式
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app"> QQ应用模式
<style type="text/css">
html {
// ie11 禁止触发默认手势操作
-ms-touch-action: none;
}
body, canvas, div {
margin: 0;
padding: 0;
outline: none;
-moz-user-select: none;
// 文本无法被选择
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
margin: 0;
cursor: default;
color: #888;
background-color: #333;
text-align: center;
font-family: Helvetica, Verdana, Arial, sans-serif;
display: flex;
flex-direction: column;
}
#Cocos2dGameContainer {
position: absolute;
margin: 0;
overflow: hidden;
left: 0px;
top: 0px;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: center;
-webkit-box-pack: center;
}
canvas {
background-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="480" height="720"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>