!!!手机网页开发

浏览数：42 / 时间：2015年06月11日

移动篇：

@media screen and (min-width:540px){#news_detail .pinglun-form { margin:0 auto;width: 540px;}}
@media screen and (max-width:540px){#news_detail .pinglun-form { margin:0 auto;width: 540px;}}
@media screen and (max-width:320px){#news_detail .pinglun-form { margin:0 auto;width: 320px;}}

CSS中直接设置：
@media screen and (max-width:479px) {
　　/* 具体的CSS属性设置 */
}

width=device-width：控制viewport的宽度，可以指定固定的值或者特殊的值，如device-width（设备宽度）。但是这个么设置有一个弊端，因为这个设置只有在竖屏状态下有效，横屏状态下，返回的却还是和竖屏状态下一样的宽度。
initial-scale=1.0：告诉浏览器初始化页面时不要对页面进行任何缩放的操作。
maximum-scale=1.0：告诉浏览器阻止页面放大，但是这样一来也禁止了用户手动放大或缩小页面，怎么说呢，美好的东西也会存在缺陷吧。
minimum-scale=1.0：告诉浏览器阻止页面缩小，同样带来上面的问题。
user-scalable=no：告诉浏览器禁止页面缩放。
target-densitydpi=device-dpi：分辨率的设置，通常可以取值：device-dpi（使用设备自身的dpi作为目标dp，不发生缩放）、high-dpi（使用高分辨率，中低分辨率场景下会相应缩小）、medium-dpi（使用中等分辨率，高低分辨率分别进行相应的放大和缩小，缺省值）、low-dpi（使用低等分辨率，中高分辨率相应放大）。
通过对viewport的设置，利用Media Queries的属性设置，你就可以做出响应式的Web页面。下面开始一步一步告诉你响应式Web设计怎么开始的：
允许网页宽度自动调整：
就是在网页的中追加viewport meta的定义。
选取一个标准开发出具体页面：
比如一个页面被要求对屏幕宽度为320px、480px、640px的三种场景下进行响应式设计，这个时候正常会选取320px下的标准先进行页面开发。
抽取最低标准下的CSS样式独立成外链样式文件：
将320px下的CSS样式全部抽取成外链样式文件，响应式设计的页面HTML代码中，不要有任何CSS定义的代码。
根据UEDMMs的视觉稿进行其他标准的CSS样式文件开发。
通过Media Queries属性设置来定义不同场景下加载不同的CSS样式文件。
http://blog.csdn.net/iamjiuye/article/details/11608927

适应高分辨率大屏手机的方法：

按照540px写网页。再加一句（可自动缩放）：

//适应高分辨率手机
$(window).on("resize load",function(){
    $("body").css("zoom", $(window).width() / 540);
    $("body").css("display" , "block");
});

【旁白】
这段时间在做应用中嵌入网页，被嵌入的网页总被缩放，非常烦恼。
让安卓工程师加上此句后：webSettings.setSupportZoom(false); 仍旧还是被缩放。（比如540宽的手机，观看网页时页面宽度是345px）——继续烦恼!

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"> （ 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨率大小）
页面所有字号大小，都只按照某一宽度的来做。   比如设计图页面宽度540的，就都按540px切图做页面，不考虑其它分辨率的自适应。
再加上下面这段代码，然后所有不同分辨率的手机，都按540px缩放：
$(window).bind(‘resize load‘, function(){
  $("body").css("zoom", $(window).width() / 540);
  $("body").css("display" , "block");
}); 
就解决了大屏手机高分辨率下，字体过小的问题。而且切图时也不用考虑多种分辨率的不同css，统统按只支持540px的做就足矣！