现在的位置: 首页 > IT运维 > 正文

手机版网页设计注意事项

2012年04月05日 IT运维 ⁄ 共 4118字 暂无评论 ⁄ 被围观 10+

用手机上网时,有些网站会无法正常显示,因为这些网页是设计在电脑上看的,如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯,就无法设计出手机上方便阅读的网页。说的简单,但是要把既有网页砍掉重练、再移植到手机上是一项大工程,笔者归纳四个方面给网页开发人员参考。

手机版网页设计注意事项-给电脑看的网页在手机上的表现

手机版网页设计注意事项-给电脑看的网页在手机上的表现

▲供手机浏览的网页可不只是把版面缩小就好那么简单,浏览器版本跟CSS语法也有大不同。

一、与计算机共享同一套网页

这里的与计算机共享网页,指的是计算机用的网页完全不经修改、就直接给手机浏览。前提是网站本身的元素要够简单、版面不能太复杂。

二、制作手机专用网页

这个做法在90年代非常盛行,当时电信业者的GPRS/WAP广告打得正火热,手机能浏览的网站都是WAP网站,也就是用WML编写的手机网,WML是很简陋的HTML,内容通常只有文字跟选单。

▲用这个方法的好处是,WAP可以在所有的手机上正常显示,不过要同时维护手机版和桌面版的网页会很困难,使得信息常常无法同步。

三、用浏览器来判断装置

Opera有桌面版和手机版,同样的Chrome、Safari、Firefox也是。有的网站会使用浏览器嗅探机制(browsersniffing) 来判断你是用哪一种、什么装置的浏览器,不过browsersniffing的设定很繁琐,而且经常出差错。最快的方法是在网页上加入各种版本的连结,让 浏览者可以自由选择格式。

四、开发复合型网站

复合版网站就是能同时给桌面和手机使用的网站,它跟刚谈到的「与计算机共享」并不一样,复合版网站虽然内容相同,但是它会根据屏幕大小来呈现版面。要做复杂 合型网站其实并不难,只要用CSS与HTML标签来调整就行,比如HTML的viewport以及CSS的media queries。

什么是viewport

Viewport指的是「画面视图」,它是一堆数值的组合,白话一点的解释就是你可以在画面上看到的范围,可以分成显示画面视图(display viewport)以及实际画面视图(actual viewport)二种。对于计算机浏览器来说,viewport比较不重要,因为显示画面视图跟实际画面视图是一样的。

如果我们在CSS里写width=200px,表示在显示器上这个对象宽200px,但在手机上却不是。CSS规范中鼓励制造商可以自行决定硬件像素要对应到多少显示像素,比如手机业者可能因为屏幕比较小,会把比例设定成1:0.5,所以手机画面会比实际画面小了一半。

怎么调整呢?只要在HTML的语法中嵌入<meta name=”viewport” content=”width=device-width”>,把actual viewport的值给visual viewport,这样网页就可以完整放入手机的小屏幕。至于CSS的部分,Opera在今年的W3C CSS会议中提出了要把viewport标签加入CSS。如果最后顺利通过,以后viewport就可以直接在CSS语法里设定。

手机版网页设计注意事项-手机vidual viewport与actual viewport定义

手机版网页设计注意事项-手机vidual viewport与actual viewport定义

▲左图是我们所看到的visual viewport,也就是显示画面视图,右图则是actual viewport。这两张图解释了为什么我们在手机上看的网站只有一小部分,因为网页以为手机的屏幕跟计算机的一样大。

手机版网页设计注意事项-让vidual viewport大小等于actual viewport

手机版网页设计注意事项-让vidual viewport大小等于actual viewport

▲让actual viewport的数值等于visual viewport,就可以让完整的网页植入手机。

什么是media queries

Media queries是CSS3的新功能,它整合了media type和max min-width/max min-height media type这两个属性,可以在不同的装置下显示不同的CSS版面。比如给screen的版面是一般的显示画面,给print的就是打印机的输出格式。

以打印机为例,如果我们不想印出网站的选单列,可以在media type下选择不同的CSS呈现方式。

以下的范例里头有两种CSS media queries的显示版面,它们是根据屏幕的大小来提供显示内容,当宽度小于480px,网页版面就会改变,比如sidebar会移到画面下方而不是跟着 主画面浮在左边(float: left)。阅动动向同时也会改变成由上到下,比较适合手机的垂直式阅读,免得读者还要吃力地在小屏幕上左右移动。

&lt;html&gt;
&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
@media all and (min-width: 480px) and (max-width: 1000px) {
#container {width: auto; max-width: 800px;}
#main {width: 70%; float: left;background-color:#efd9ec;}
#sidebar {width: 30%; float: left; margin-bottom: 10px;background-color:#c7bfd6;}
#pub {width: 30%; margin-left: 70%; float: none;background-color:#b1beb8;} 
} 

@media all and (min-width: 100px) and (max-width: 479px) {
#container {width: auto; max-width: 479px;}
#main,{width: 100%; float: none;background-color:yellow;}
#sidebar{width: 100%; float: none;background-color:red;}
#pub {width: 100%; float: none;background-color:green;}
h1 {position: absolute; top: 0; height: 30px; width: 100%;}
#sidebar {position: absolute; top: 40px; height: 40px;}
#sidebar p {display: none;}
#sidebar ul {padding: 0; margin-top: 10px; overflow: hidden;}
#sidebar ul li {display: inline; font-size: 15px;}
#main {position: absolute; top: 80px;}
#pub, #footer {display: none;}
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;container&quot;&gt;
	&lt;div id=&quot;main&quot;&gt;
		&lt;p&gt;&lt;strong&gt;main:&lt;/strong&gt;用手机上网时,有些网站会无法正常显示,因为这些网页是设计在电脑上看的,如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯,就无法设计出手机上方便阅读的网页。说的简单,但是要把既有网页砍掉重练、再移植到手机上是一门大工程,笔者归类四大方向给网页开发人员参考。&lt;/p&gt;
		&lt;p&gt;用手机上网时,有些网站会无法正常显示,因为这些网页是设计在电脑上看的,如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯,就无法设计出手机上方便阅读的网页。说的简单,但是要把既有网页砍掉重练、再移植到手机上是一门大工程,笔者归类四大方向给网页开发人员参考。&lt;/p&gt;
		&lt;p&gt;用手机上网时,有些网站会无法正常显示,因为这些网页是设计在电脑上看的,如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯,就无法设计出手机上方便阅读的网页。说的简单,但是要把既有网页砍掉重练、再移植到手机上是一门大工程,笔者归类四大方向给网页开发人员参考。&lt;/p&gt;
		&lt;p&gt;用手机上网时,有些网站会无法正常显示,因为这些网页是设计在电脑上看的,如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯,就无法设计出手机上方便阅读的网页。说的简单,但是要把既有网页砍掉重练、再移植到手机上是一门大工程,笔者归类四大方向给网页开发人员参考。&lt;/p&gt;
	&lt;/div&gt;
	&lt;div id=&quot;pub&quot;&gt;
		&lt;p&gt;&lt;strong&gt;pub:&lt;/strong&gt;用手机上网时,有些网站会无法正常显示,因为这些网页是设计在电脑上看的,如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯,就无法设计出手机上方便阅读的网页。说的简单,但是要把既有网页砍掉重练、再移植到手机上是一门大工程,笔者归类四大方向给网页开发人员参考。&lt;/p&gt;
	&lt;/div&gt;
	&lt;div id=&quot;sidebar&quot;&gt;
		&lt;p&gt;&lt;strong&gt;sidebar:&lt;/strong&gt;用手机上网时,有些网站会无法正常显示,因为这些网页是设计在电脑上看的,如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯,就无法设计出手机上方便阅读的网页。说的简单,但是要把既有网页砍掉重练、再移植到手机上是一门大工程,笔者归类四大方向给网页开发人员参考。&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
手机版网页设计注意事项-Media Queries

手机版网页设计注意事项-Media Queries

▲这张图使用Opera来显示viewport的两个Media queries,它们是按照宽度来改变CSS的呈现。

给我留言

您必须 [ 登录 ] 才能发表留言!

×
#