首页 > 代码库 > 前端PC页面，移动端页面问题笔记~~
前端PC页面，移动端页面问题笔记~~
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="gbk"/> 5 <meta name="robots" content="all"/> 6 <meta name="author" content="Tencent-TGideas"/> 7 <meta name="Copyright" content="Tencent"/> 8 <meta name="Description" content="" /> 9 <meta name="Keywords" content="" /> 10 <title>{当前专题名称}-官方网站-腾讯游戏</title> 11 <!-- 设计：cp | 重构：cp | 创建：----/--/-- --> 12 <style> 13 /* reset */ 14 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} 15 table{border-collapse:collapse;border-spacing:0} 16 address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal} 17 ol,ul{list-style:none} 18 caption,th{text-align:left} 19 h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%} 20 q:before,q:after{content:‘‘} 21 fieldset,img,abbr,acronym{border:0} 22 a{text-decoration:none} 23 body{padding-top:42px;font:14px/1.5 ‘\5FAE\8F6F\96C5\9ED1‘,‘\u9ed1\u4f53‘,tahoma,sans-serif;overflow-x:hidden;} 24 25 /* footer */ 26 #footer_ied{text-align:center;font-size:12px;line-height:19px;color:#8f8f8f;background:#000000;} 27 .wrap_ied{margin:0 auto;padding:30px;width:940px} 28 .wrap_ied a{color:#8f8f8f} 29 #footer_ied .e{font-size:10px;-webkit-text-size-adjust:none;} 30 .hide{display:none;} 31 </style> 32 </head> 33 <body> 34 3 44 </body> 45 </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页面，移动端页面问题笔记~~
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。