各大门户手机端页面是怎么切得

这几天 换了公司，新公司的几个页面需求是需要根据 手机屏幕大小自适应 缩放。

第一次 搞搞没有资料没有文档，居然把我一个搞过移动端的哥们都问的来懒得搭理我了 00！

大体先介绍下几个门户网站的做法

1 我最爱的网易（我最爱看评论 ）

meta

<!--初始页面缩放大小，禁止用户缩放-->

<meta content="width=device-width,user-scalable=no" name="viewport">

<!--phone设备中的safari私有meta标签，它表示：允许全屏模式浏览-->

<meta name="apple-mobile-web-app-capable" content="yes">

<!--iOS6新标签，当你在iOS移动平台访问一个网站时，会提示你去App Store下载这个网站的官方App-->

<meta name="apple-itunes-app" content="app-id=425349261">

header nav 高度px写死

列表页width:100%;正文页页面设了个max-width: 950px;

字体大小 px写死的;

padding 用的百分比 如新闻列表li： padding:0 3.1%;

margin 用的 pt 如文章正文p 标签 margin: 15pt 0;

图片 用的 width:100%; 然后设了个max-width

2 腾讯

meta

<!--如果安装了GCF(谷歌的插件让ie跑webkit)则GCF来渲染，没安装则用ie最高版本内核渲染, 更多click here-->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--比网易多了个 初始化页面比例 initial-scale,禁止缩放写的也更加严谨-->

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<!--这是shenma ?-->

<meta name="shenma-site-verification" content="f28da5e2e3fb6e2afd372a3eedfda998">

<!--在web-app状态条的（屏幕顶部条）颜色-->

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!--版权归腾讯所有-->

<meta name="copyright" content="Copyright (c) 1998-2013 Tencent.">

<!--windows专有meta，识别移动内容，支持情况未知-->

<meta name="MobileOptimized" content="320">

header nav footer nav 里面的 width:34px; height:20px;

新闻列表 用css @media 写的，当屏幕小于321px时，自适应品目宽度，当屏幕大于321px，分为俩排，各站50%；

字体大小 px写死

padding margin 媒体查询 重写css

img 大小写死

3 压轴的大哥来了 淘宝

meta

<!--添加到主屏幕，全屏显示-->

<meta content="yes" name="apple-touch-fullscreen">

<meta content="yes" name="apple-mobile-web-app-capable">

<!--这又是神马-->

<meta name="data-spm" content="a215s">

<!--不识别邮件和不把数字识别为电话号码-->

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

<!--这也应该是允许手机全屏，不知道只对谁的。。-->

<meta content="fullscreen=yes,preventMove=no" name="ML-Config">

<!--老大用的0.5，看来直接切的640的页面-->

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

m.taobao.com的padding margin width height font-size 都是用的rem;

首页的图片其实是background；background-size：contain来控制的大小;

大屏访问（桌面,pad等）m.tao.com，页面dom#content会给个max-width="65rem"; html的font-size:33.75px;

手机访问会根据屏幕的分辨率设置html 的font-size;font-size改变从而 rem的值改变,页面的padding margin font-size，都会根据手机屏幕的分辨率大小而响应改变。手机横过屏来的时候，js会判断屏幕的大小然后算出相对的值， 320的屏(如ipone4)html的 font-size:40px，iphone横过来 480 /320*40 = 60;

其他相关的：

//这行代码可以指定网页使用 webkit 引擎渲染，当然，只对 360 浏览器 6.5+ 有效

<meta name="renderer" content="webkit">

// 如果你的网站不想被剥去外衣、往赤裸的身体上贴广告，就加上 下面的代码 。

<meta http-equiv="Cache-Control" content="no-siteapp" />

这个应该是需要换掉了 click here

<meta http-equiv="Cache-Control" content="no-transform " />