桌面网站与手机网站

不用看统计数据都知道,近几年手机网站的浏览量比起桌面网站肯定是大幅度上升的。所以编写网站的手机版本,是一个很重要的工作。

手机网站的做法,主要有两种。

一种是让你桌面网站兼容手机,或者说倒过来,让你的手机网站兼容桌面。这样你的网站在桌面和在手机是共用 css 文件的,只是在不同的屏幕会使用不同的样式。我的博客之前也是这样做的,加上这样的样式供手机屏幕使用:

@media screen and (orientation: portrait)
{
    body, input, textarea, select
    {
        font-size: 28px;
    }  
}

这个样式的意思是在竖屏的时候,把字号显示为 28px。其实 css 样式是不区分你使用的是不是手机的,当你在桌面调整你的浏览器尺寸,使它的宽高比是一个竖屏的时候,也会使用这个样式。同理,当手机横屏使用的时候,不会使用这个样式。这样的话,还需要添加一个横屏的样式:

@media screen and 
    (orientation: landscape) and 
    (max-device-width: 960px)
{
    body, input, textarea, select
    {
        font-size: 28px;
    }
}

这个样式的意思是在横屏,同时屏幕的最大宽度不超过 960px 的时候,也使用 28px 的字号。之所以要添加最大宽度的限制,是因为桌面浏览器本来就是横屏,但是桌面屏幕较宽,都会超过 960px,所以以 960px 为界,区分桌面横屏和手机横屏。

这种让桌面网站和手机网站互相兼容的方法,优点是编写简单。缺点是限制了桌面网站和手机网站必须要呈现同样的内容,这样在大屏幕的桌面上,页面就会有大量的留白。所以这样的做法适合内容少的博客。

内容多的门户网站和社交网站,会用另外一种做法,就是编写专门的手机站。比如站点:yourdomain.com 会编写一个手机站点:m.yourdomain.com。这样手机网站就是可以呈现和桌面网站不同的内容。一般是桌面网站呈现完整的内容,而手机网站呈现简化的内容。

由于桌面和手机访问的是不同的页面,可以加载不同的 css 文件,所以不必去编写那些兼容的样式了。

但是这样带来了一个新的问题,就是用户复制了你的桌面链接,然后发送到手机,或者反过来,复制了手机链接,然后发送到桌面,这样你的网站就显示了错误的页面。所以这种做法都要做一个桌面访问或手机访问的判断,可以在客户端用 javascript 判断,设置 location.href 属性去访问对应的页面,也可以在服务器端判断,向客户端发送 302 重定向去访问对应的页面。最近我对自己的博客做了修改,采用的就是在服务器端判断的方法。

这种做法需要在设计上想清楚,你的桌面网站和手机网站的链接映射规则是什么,如果不是故意忽略的话,每一个桌面网站的链接都能找到对应的手机网站链接,反之亦然。

原文链接:http://bibaoke.com/post/67

阅读更多
想对作者说点什么? 我来说一句

订餐网站WAP.rar

2015年05月31日 4.04MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭