设计手机版网页，不是等比例缩小就好

072016/03 设计手机版网页，不是等比例缩小就好

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

　　一、与电脑共用同一套网页

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

　　二、制作手机专用网页

　　这个做法在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比较不重要，因为显示画面视图跟实际画面视图是一样的。

　　何谓media queries

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

上海网站建设 上海网页设计 网站制作（www.lvon8.com）

原文标题：设计手机版网页，不是等比例缩小就好

• 上一篇：营销型网站建设的价值体现
• 下一篇：网站与网站之间的质量差别来源于哪？