cocos2d-x.js index.html 0基础学习

最新推荐文章于 2023-03-22 15:15:35 发布

崔世勋

最新推荐文章于 2023-03-22 15:15:35 发布

阅读量443

点赞数

分类专栏： cocos2d/游戏开发

本文链接：https://blog.csdn.net/chs007chs/article/details/103032039

版权

cocos2d/游戏开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

崔世勋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cocos2d-x.js index.html 0基础学习

<!DOCTYPE html><html>head中的大部分标签都是用于说明一些显示的属性，如果是手机网页则需要设置这些，如果是普通网页应用则不必设置。<head> 告诉浏览器此页面属于什么字符编码格式，gb2312不包含繁体，gbk包含繁体， <meta charset="utf-8"> 网页标题 <t...
复制链接

扫一扫