码迷,mamicode.com
首页 > 移动开发 > 详细

!!!手机网页开发

时间:2014-06-15 06:26:51      阅读:400      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   http   tar   

移动篇:

@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;}}

 

<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="css479.css" />   示例代码代表当当前屏幕宽度小于479px的时候,加载testcssbywidth1.css文件来渲染页面。

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

<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"> (强制显示真实分辨率大小)

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的做就足矣!

 

 

 

 

 

 

var screenWidth=$(document).width();

 

!!!手机网页开发,布布扣,bubuko.com

!!!手机网页开发

标签:style   class   blog   code   http   tar   

原文地址:http://www.cnblogs.com/qq21270/p/3785961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!