手机网页的设计注意事项

  进行手机网页设计的时候，与计算机共享同一套网页，这里的与计算机共享网页，指的是计算机用的网页完全不经修改、就直接给手机浏览。下面深圳天琥设计培训学校介绍手机网页的设计注意事项，希望可以帮助到各位。

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

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

  二、制作手机专用网页

  这个做法在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的语法中嵌入，把actual viewport的值给visual viewport，这样网页就可以完整放入手机的小屏幕。至于CSS的部分，Opera在今年的W3C CSS会议中提出了要把viewport标签加入CSS。如果较后顺利经过，以后viewport就可以直接在CSS语法里设定。

  什么是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)。阅动动向同时也会改变成由上到下，比较适合手机的垂直式阅读，免得读者还要吃力地在小屏幕上左右移动。

尊重原创文章，转载请注明出处与链接：http://szthjy.5zix.com/news/105014/ 违者必究！ 以上就是深圳天琥设计培训学校 小编为您整理手机网页的设计注意事项的全部内容。

---

• ← 深圳天琥设计培训学校告诉你ui设计要学什么东西
• 深圳天琥教育告诉你平面设计的学费贵吗 →