<!DOCTYPE html>

 <html>

 <head>

 <meta charset="gbk"/>

 <meta name="robots" content="all"/>

 <meta name="author" content="Tencent-TGideas"/>

 <meta name="Copyright" content="Tencent"/>

 <meta name="Description" content="" />

 <meta name="Keywords" content="" />

 <title>{当前专题名称}-官方网站-腾讯游戏</title>

 <!-- 设计：cp | 重构：cp | 创建：----/--/--  -->

 <style>

     /* reset */

     body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}

     table{border-collapse:collapse;border-spacing:0}

     address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal}

     ol,ul{list-style:none}

     caption,th{text-align:left}

     h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%}

     q:before,q:after{content:''}

     fieldset,img,abbr,acronym{border:0}

     a{text-decoration:none}

     body{padding-top:42px;font:14px/1.5 '\5FAE\8F6F\96C5\9ED1','\u9ed1\u4f53',tahoma,sans-serif;overflow-x:hidden;}

     /* footer */

     #footer_ied{text-align:center;font-size:12px;line-height:19px;color:#8f8f8f;background:#000000;}

     .wrap_ied{margin:0 auto;padding:30px;width:940px}

     .wrap_ied a{color:#8f8f8f}

     #footer_ied .e{font-size:10px;-webkit-text-size-adjust:none;}

     .hide{display:none;}

 </style>

 </head>

 <body>

 </body>

 </html>

其中CSS样式重置；加上描述，关键字等SEO 优化；其中的内容可以自己编辑

PC端就简单完成了；

接着 给出个移动端的

<!DOCTYPE html>

<html>

<head>

<meta charset="gbk">

<link href="http://ossweb-img.qq.com/images/ttxd/m/web201605/logo.png" rel="apple-touch-icon">

<link href="http://ossweb-img.qq.com/images/ttxd/m/web201605/logo.png" rel="apple-touch-icon-precomposed">

<meta name="applicable-device" content="mobile">

<meta name="robots" content="all">

<meta name="format-detection" content="telephone=no">

<meta name="author" content="Tencent-TGideas">

<meta name="Copyright" content="Tencent">

<meta name="applicable-device" content="mobile"> 

<meta name="Description" content="《天天炫斗》是腾讯第一实时PK动作手游，具有炫酷的格斗画面和超爽快的打击手感。游戏角色个性迥异、技能华丽酷炫，无限连击的全屏大招，给人带来动作游戏巅峰体验。游戏中有实时PK、公会争霸、组队闯关、语音聊天等多种好友互动玩法，还可变身成为BOSS、机甲击溃敌人。新版本将更新角色觉醒系统，焕然一新的主角和更加强大的技能带来全新体验！" />

<meta name="Keywords" content="天天炫斗,天天炫斗官网,天天炫斗下载,天天炫斗攻略,天天炫斗iOS版,天天炫斗安卓版,腾讯天天炫斗,格斗手游" />

<title>{当前专题名称}-官方网站-腾讯游戏</title>

<script>

function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:640,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode="android-2.2",d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode="android-2.2":4.4>d?b.mode="android-dpi":d>=4.4&&(b.mode=b.dWidth>b.uWidth?"android-dpi":"android-scale")),void 0)}function d(){var e,f,g,h,c="",d=!1;switch(b.mode){case"apple":f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c="width="+b.uWidth+",initial-scale="+f+",minimum-scale="+f+",maximum-scale="+f+",user-scalable=no";break;case"android-2.2":a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?320:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,320==e?b.dWidth=b.ratio*e:640>e&&(b.dWidth=e),b.mode="android-dpi",d=!0;case"android-dpi":f=160*b.uWidth/b.dWidth*b.ratio,c="target-densitydpi="+f+", width="+b.uWidth+", user-scalable=no",d&&(b.mode="android-2.2");break;case"android-scale":c="width="+b.uWidth+", user-scalable=no"}g=document.querySelector("meta[name='viewport']")||document.createElement("meta"),g.name="viewport",g.content=c,h=document.getElementsByTagName("head"),h.length>0&&h[0].appendChild(g)}function e(){var a="";for(key in b)a+=key+": "+b[key]+"; ";alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:"apple",userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:640});

</script>

<!-- 设计：cp | 重构：cp | 创建：----/--/--  -->

<style>

    /*reset*/

    ::-webkit-input-placeholder{color:#999;}

    input[type="text"],input[type="password"],select{-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:0;font-family:'\5FAE\8F6F\96C5\9ED1';}

    body,ul,ol,p,h1,h2,h3,h4{margin:0;padding:0;}

    img{border:0;display:block;}

    a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

    ol,ul{list-style:none;}

    html{-webkit-text-size-adjust:none;font-size:16px;}

    body,html{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;width:100%;height:100%;}

    .c:after{content:'\20';display:block;height:0;line-height:0;visibility:hidden;clear:both;}

    .hide{display:none;height:0;font-size:0;line-height:0;visibility:hidden;overflow:hidden;}

    a{text-decoration:none;}

    a:focus{outline:none}

</style>

</head>

<body>

    <h1 class="hide">{专题名称}</h1>

    <!--#include virtual="/m/web201605/inc/header.inc" --> 

    <div class="stage"></div>

    <script src="http://pingjs.qq.com/ping_tcss_ied.js"></script>

    <script>

    //统计

    if(typeof(pgvMain) == 'function')pgvMain();

    </script>

</body>

</html>

其中下面这段代码会根据手机的系统，尺寸等动态添加meta 标签

   <script>

        function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:640,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode="android-2.2",d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode="android-2.2":4.4>d?b.mode="android-dpi":d>=4.4&&(b.mode=b.dWidth>b.uWidth?"android-dpi":"android-scale")),void 0)}function d(){var e,f,g,h,c="",d=!1;switch(b.mode){case"apple":f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c="width="+b.uWidth+",initial-scale="+f+",minimum-scale="+f+",maximum-scale="+f+",user-scalable=no";break;case"android-2.2":a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?320:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,320==e?b.dWidth=b.ratio*e:640>e&&(b.dWidth=e),b.mode="android-dpi",d=!0;case"android-dpi":f=160*b.uWidth/b.dWidth*b.ratio,c="target-densitydpi="+f+", width="+b.uWidth+", user-scalable=no",d&&(b.mode="android-2.2");break;case"android-scale":c="width="+b.uWidth+", user-scalable=no"}g=document.querySelector("meta[name='viewport']")||document.createElement("meta"),g.name="viewport",g.content=c,h=document.getElementsByTagName("head"),h.length>0&&h[0].appendChild(g)}function e(){var a="";for(key in b)a+=key+": "+b[key]+"; ";alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:"apple",userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:640});

    </script>

类似

1 <meta name="viewport" content="width=640,initial-scale=0.5859375,minimum-scale=0.5859375,maximum-scale=0.5859375,user-scalable=no">

然后你就可以根据640的设计稿按照px像素布局

前端PC页面，移动端页面问题笔记~~的更多相关文章

  1. CSS3——PC以及移动端页面适配方法（流体布局）

    流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值. 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比. 两种解决办法: 1)width:calc(20% - 4px) 2)widt ...

  2. pc和移动端页面字体设置

    移动端项目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC” ...

  3. CSS3——PC以及移动端页面适配方法（响应布局）

    响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度. <!DOCTYPE html> <html lang="en" ...

  4. TERSUS无代码开发(笔记05)-简单实例电脑端页面设计

    案例笔记电脑端页面设计   1.新建项目(请假管理qjgl)   2.开发软件界面介绍(常用的功能按键)      3.目录中显示元件对象      4.对元件对象的操作主要方式是双击(双击哪个元件, ...

  5. 用chrome和anywhere，配合安卓机搭建最简单的移动端页面测试。

    很多时候,我们前端在写移动端页面的时候,虽然目前chrome有调试模式,可以模拟手机的部分效果,但仍有部分效果需要直接在手机上进行页面的调试,今天就在这里推荐一个适合windows+安卓的无需连接局域 ...

  6. pc端页面在移动端显示问题

    1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...

  7. 移动端和PC端页面常用的弹出层

    我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端 我们需在页面引入弹出框的样式和 ...

  8. 让PC端页面在手机端显示缩小版的解决方法

    做页面的时候我们做好pC端页面时,因编辑那边需求,在手机端页面也应该是缩小版,不能乱的.在网上找了各种解决方案,经实验,这种是可以的: 在head里边加上这两句meta  <meta name= ...

  9. 【web前端】移动端控制台插件，手机端页面查看相关页面控制台信息

    一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...

  10. PC端页面同比例缩放

    <meta name="viewport" content="width=1202"> //这行代码可以使PC端页面同比例缩放,不至于变形

随机推荐

  1. bzoj 合集 1079 1791 1876 2208 2306

    1079 记忆化瞎搞吧,[a][b][c][d][e][l]表示当前有能涂1次的油漆a个,能涂2次的b个….前一个颜色为l,再搞下转移就行了. 1791 基环树上找直径 1876 高精度 2208 看 ...

  2. JavaScript 笔记(2) -- 类型转换 & 正则表达 & 变量提升 & 表单验证

    目录:  typeof, null, undefined, valueOf() 类型转换 正则表达式 错误: try, catch, throw 调试工具 变量提升 strict 严格模式 使用误区 ...

  3. godaddy虚拟空间的伪静态配置

    原文发布时间为:2011-02-24 -- 来源于本人的百度文章 [由搬家工具导入] 只要在web.config文件的<configuration>子节点下 加入以下节点，即可实现 伪静态 ...

  4. sql语句like的用法 有些正则表达式可以通过like实现

    原文发布时间为:2010-10-28 -- 来源于本人的百度文章 [由搬家工具导入] 在SQL结构化查询语言中，LIKE语句有着至关重要的作用。LIKE语句的语法格式是：select * from 表 ...

  5. 使用python将ppm格式转换成jpg【转】

    转自:http://blog.csdn.net/hitbeauty/article/details/48465017 最近有个很火的文章,叫 有没有一段代码,让你觉得人类的智慧也可以璀璨无比? 自己试 ...

  6. VIM使用技巧3

    假如有如下代码: var  foo = "method("+argument1+","+argument2+")" 任务:在每个“+”前后各 ...

  7. smtp发送邮件记得结尾发送"\r\n.\r\n"

    前段时间老板安排我修复一个邮件服务器后台C程序的bug,这个功能是邮件强制发送功能,从邮件管理后台将垃圾邮件发送出去. 因为服务器是debian系统,所以我用dbg配合日志大致跟踪后,追踪到了读取邮件 ...

  8. MySQL自增锁模式innodb_autoinc_lock_mode参数理解调优

    前段时间某数据表运行过程中,出现自增字段突然跳跃式增长的问题,潜心研究发现,问题导致原因可能是因为并发写入导致 于是通过各种途径查阅是因为innodb_autoinc_lock_mode参数设置的不同 ...

  9. ABP开发框架前后端开发系列---（1）框架的总体介绍

    ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型.学习使用ABP ...

  10. JMeter性能测试常用之事务控制器实例

    通常进行性能测试时,我们一般仅考虑主要的数据返回,不考虑页面渲染所需要的数据(例如:css.js.图片等).但当我们需要衡量打开一个页面(页面渲染完成)的性能时,我们就需要考虑完成页面渲染所需要的图片 ...