桌面网站与手机网站

转载 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

建一个手机网站到底需要多少钱

小编根据多年的实践经验总结出了一些关于手机网站建设的问题。随着移动互联网的普及,用户对它的依赖性越来越强。却来越多的企业也开始意识到建设手机网站的重要性,但是面对市场上繁多的手机网站的时候,很多企业顿...
  • baidu_24133725
  • baidu_24133725
  • 2014年12月09日 17:09
  • 1186

4.PHP接入支付宝手机网站支付、移动支付接口

前面已经介绍完即时到账、支付的回调接口。本文档主要完善了支付宝手机网站支付、移动支付接口的代码示例。...
  • hel12he
  • hel12he
  • 2016年07月29日 23:28
  • 4240

手机网站自适应屏幕大小方法总结1

手机网站自适应方法总结1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释...
  • qq_26291823
  • qq_26291823
  • 2016年03月05日 22:56
  • 1430

支付宝手机网站支付接口集成的经验小结

1.申请企业账号:我们需要一个企业账号; 2.产品功能签约:支付宝开放平台提供了各种功能的API,找到我们需要的API,查看文档(手机网站支付产品介绍https://b.alipay.com/ord...
  • ycc1943
  • ycc1943
  • 2017年03月09日 08:50
  • 6921

java支付宝网站支付

想要做支付宝网站支付,首先必须要有企业级商户号,并且成功签约,得到PID和key controller就简单的写一下,异步回调就不写了,页面在后面 @RequestMapping(value = ...
  • clz979991314
  • clz979991314
  • 2016年10月09日 17:24
  • 1638

网站pc版转成手机版的三种方法

现在做自媒体博客的朋友有很多,可是,大家的自媒体博客都是PC版,只适用于电脑,平板上面,对于手机来说的话就不适合了,影响用户体验。下面,邵连虎博客就教大家三种方法把自媒体博客PC版转换成手机版网站。 ...
  • suzui11111
  • suzui11111
  • 2017年02月22日 23:31
  • 8365

js几种将网站设为首页和加入收藏的代码

li>a href="javascript:setHome(this,window.location)"> span class="glyphicon glyphicon-home">span...
  • web_note
  • web_note
  • 2017年12月11日 23:22
  • 335

dedecms电脑网站怎样建设手机网站使电脑手机同步访问

在如今无线互联网大潮的冲击下,越来越多的pc网站访问量下降,首当其冲的就是以pc网站为生的站长们,为了顺应无线互联网的要求,站长们很有必要为自己的pc网站扩展一套手机网站,更早的抓住手机用户的流量,使...
  • live_xian
  • live_xian
  • 2015年04月06日 16:31
  • 2229

手机(wap)网站与网页(web)网站进行转换JS源码总结

方法一:在pc的网址里面加入代码   "http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/JavaScr...
  • dm1314oooooooo
  • dm1314oooooooo
  • 2017年04月01日 14:31
  • 655

手机网站等比例缩小

第一种方式: if(/Android (\d+\.\d+)/.test(navigator.userAgent)){ var version = parseFloat(RegExp...
  • ak157888
  • ak157888
  • 2017年12月01日 15:41
  • 82
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:桌面网站与手机网站
举报原因:
原因补充:

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