公司使命:打造嘉兴技术实力最强的网络公司
服务项目:嘉兴网站建设 嘉兴网站制作 嘉兴网站优化
新闻中心

手机建站,微网站的分辨率

发布时间:2015/1/7 11:36:56   文章来源:jiaxingweb   浏览:[  ]   评论:[  ]

    现如今手机网站、微网站盛行的时候,手机的屏幕有很多种,目前比较多的是1080P和720P两种,当然高端的手机有2k的分辨率。那么在制作手机网站的时候,怎么样让各个手机都能很好的浏览同一个网站(当然在这个过程中,您可以使用响应式建站架构,然这个成本太高。)

 
    目前最主要的有两种方式进行手机网站分辨率设计。一种简单的就是在定义每个标签宽度的时候采用百分比的方式,如<div style="width:100%">内容</div>,这样就是比例式的展示给所有手机用户,这种方式比较适合简单的网站。
 
    第二种方式,也是我们所采用的方式,就是固定宽度的方式,一般我们固定宽度为640px。这样在在手机网页设计的时候就按照640px的宽度进行设计。高度根据内容的多少不同。可以随便高度,但是一般为了使手机网站能满屏显示,高度不低于(这里指的是微网站,通过微信端打开的网页)1020px。
 
    这样很多人就有疑问了。现在的手机都是720p和1080p,这两个数字指的是手机屏幕的宽度,也就是手机屏幕的宽度为720px和1080px。html5给出了解决的办法,如下:
 
<meta name="viewport" content="target-densitydpi=device-dpi, width=640, user-scalable=no">
此代码放置于head标签内。
解释:viewport顾名思义为“视图”的意思,“这个页面我们以什么方式浏览呢”的意思。
在content中有赋值:
target-densitydpi一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。
evice-dpi–使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
width 控制 viewport 的大小,视图大小为640px。
user-scalable=no用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。意思不允许缩放。
 
   这样一个width=640px的网页就可以在各种智能手机上全屏浏览了。
 
 
 
网上的另一种方式,不通过html5 viewport的方式,而是通过javascript的方式来判断手机屏幕的宽度,除以640(640指的是网页的宽度),再将页面的宽度乘以上述得到的比例值。代码如下(需要调用jquery):
 <script language="javascript" >
$(window).bind('resize load', function(){
$("body").css("zoom", $(window).width() / 640);
$("body").css("display" , "block");
});
</script>
 

 

评论
发表评论
评论内容:
昵称:
邮箱:
嘉兴网络公司 嘉兴网站建设 嘉兴网站制作 嘉兴建网站 嘉兴做网站 嘉兴网页制作 PE给水管 HDPE中空壁缠绕管 ABS管生产厂家
服务热线: 0573-82102225 15858312461 QQ: 56373131 E-mail: sales@jiaxingweb.com 地址: 嘉兴市南湖区富润路101号320室 浙ICP备09050985号
嘉兴网站建设-嘉兴网站制作-嘉兴网站优化-龙媒网络@嘉兴网络公司 www.jiaxingweb.com