桌面网站与手机网站

转载 2017年06月05日 18:37:59

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

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

一种是让你桌面网站兼容手机,或者说倒过来,让你的手机网站兼容桌面。这样你的网站在桌面和在手机是共用 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

适合手机、桌面平台的Bootstrap网站模板

Bootstrap这个前端框架从2011年发布至今的3.0,已经有超多的设计师和前端人员使用,所以有关Bootstrap的插件、模板、样式也越来越多,今天我们再次摘选一些用BS编写的网站模板,我想对企...

网站设计师应忘记桌面:以移动设备为主

导语:美国网络杂志Slate今天发表署名法哈德·曼约奥(Farhad Manjoo)的文章称,随着平板电脑的使用量逐渐增加,各大网站都应当对这类设备加以重视,甚至在开发网站时,应当首先考虑移动设备的体...

HTML+CSS编写静态网站-38 Vedio页面适配桌面布局

视频教程观看地址:http://study.163.com/course/courseMain.htm?courseId=1003879015 这节课。我们希望让Vedio页面对不仅只适配移动布...

在ubuntu网站上得到那些管理员的信息是从不想做一个真正的桌面

我一直以为ubuntu的目标是要做一个稳定的桌面,所以我学习的软件出发点之一是要跨平台的,就找呀找呀,找到好多软件,有些软件都编了十多年甚至有二十年的了,也都移植到linux上,不过他们一般是在red...
  • guokw
  • guokw
  • 2012年10月07日 02:40
  • 299

webapp添加网站图标到ios桌面

1.设置图标logo

Python运用urllib2和BeautifulSoup爬取网站ZOL桌面壁纸上的精美电脑壁纸

Python运用urllib2和BeautifulSoup爬取网站ZOL桌面壁纸上的精美电脑壁纸 #!/usr/bin/env python # -*- coding: utf-8 -*- # @T...

PAIP.WEB程序网站安全扫描检测工具(桌面程序)总结

PAIP.WEB程序网站安全扫描检测工具(桌面程序)总结 作者Attilax , 1466519819@qq.com ****Acunetix web Vulnerability Scan...
  • attilax
  • attilax
  • 2012年09月20日 15:53
  • 4270

Asp.Net-创建网站的快捷方式到桌面,开始菜单,收藏夹

protected void Page_Load(object sender, EventArgs e) { CreateShortcut("baidu",...

jsp,java在桌面生成网站快捷方式

Insert title here

我自己开发了一套linux 桌面环境(DE),起名叫icon DE,在ubuntu12.04里面,已经很完美的运行。现在过来借贵网站,推广一下,征询试用者,以便进一步提高。

http://www.cnbeta.com/articles/187572.htm 我自己开发了一套linux 桌面环境(DE),起名叫icon DE,在ubuntu12.04里面,已经...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:桌面网站与手机网站
举报原因:
原因补充:

(最多只允许输入30个字)