立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] txgz999@yahoo.com

日志

自适应的Discuz网页

热度 4已有 206 次阅读2018-9-29 05:11 PM |个人分类:Discuz

现在用手机上网的比例越来越高,怎样能让这些用户在手机上也能愉快地浏览自己的网站呢?一般有这么几种做法:
  1. 手机APP(mobile app) 提供网站APP
  2. 手机版(dedicated mobile design) 设计专门的网页给手机用户使用
  3. 自适应式(又称响应式)网页设计(responsive web design) 让网页依据用户浏览设备的不同做相应调节
此外还有 progressive web design, adaptive web design等方式。

Discuz官方提供过多种手机版。它们的共同特点手机上向服务器发的请求和电脑版基本上是用同样的脚本文件处理的,仅依赖不同的模板内容来提供不同的客户端界面。
名称首发版本手机支持模板文件夹JS文件夹CSS文件夹特点
标准版Discuz! X2.0最初为各类手机使用,从3.0起主要为Windows Phone所用,在3.4里不是任何手机的默认版,但用户可以点击标准版链接来切换到标准版template/default/mobile使用html
极简版Discuz! X3.0诺基亚和爱立信等老式手机template/default/wml使用wml
触屏版Discuz! X3.0iPhone和安卓等智能手机template/default/touchstatic/js/mobilestatic/image/mobile使用html和js
新触屏版Discuz! X3.4iPhone和安卓等智能手机template/default/mtemplate/default/m/jstemplate/default/m/css使用html和js
标准版和极简版不使用javascript。触屏版和新触屏版使用javascript,而且基于jQuery,因而javascript代码和电脑版的相比更为简练。

但是这些手机版都只支持论坛,所以不适合以博客为主的网站。而且在新型智能手机上的浏览器和电脑上一样支持html5和javascript的情况下,仅仅因为手机屏幕小就得单独造一套页面/模板,也有些不值,还容易造成电脑和手机页面的脱节。另一种做法是只使用一套页面/模板。用css风格来调节页面使之能在大小不同的设备上都能合适的显示,这就是自适应网页设计的想法。本文讨论下在对Discuz网站做不多的改动后,就可以使之产生自适应的效果。在前文(链接)中,我们讨论过Discuz提供的窄屏和宽屏两种风格。窄屏就是不管浏览器的大小,网页内容的宽度都固定为960px。宽屏则是网页内容占据了整个浏览器的宽度,但不小于960px。我们的修改是在宽屏的基础上去掉最小宽度的限制,因而成为可以适合任何尺度浏览器的全屏风格。

迈向自适应的第一步是在网页头部加上自适应meta标签: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 这句话在电脑上不起作用,但在手机上则会产生明显的效果。因为手机在显示网页时会先按浏览器是高解析度设置来决定网页内容的布局,再缩小到手机屏幕的尺寸显示。所以一般手机上浏览器里可以显示很多内容,但字体可能异常的小。加了这句后手机就按屏幕的大小来显示网页内容了。这样做后,网页上的字看上去就大多了。比较下面的左图和中图可以看出差异。
手机上显示的版块页 手机上显示的版块页(加了viewport设置) 手机上显示的自适应版块页


但是这样做的后果是网页上的很多内容就显示在屏幕外了,需要用滚动条才能看到。出现这种情况一方面是因为有些网页内容有固定的宽度设置,另一方面是有些内容显示出来的宽度超出了屏幕宽度。

我们可以用加媒体查询(media query)条件的css风格语句来依据浏览器可视区域(viewport)的大小来调节网页显示的内容,使得显示内容的宽度不超过可视区域的宽度。首先我们要决定大型和小型设备的划分。当今最流行的响应式网页设计框架Bootstrap 4.1是这样设置临界点的(链接):
 浏览器可视区域的宽度典型设备
超小[0. 576px)竖立 iPhone X (375px)
小号[576px, 768px)横握 iPhone X (724px)
中号[768px, 992px)竖立 iPad (768px)
大号[992px, 1200px)横握 iPad (1024px)
超大[1200px, +∞)电脑 (1920px)
我们接下来的讨论也按此来对小型设备添加特别的风格。

在小型设备上,我们可以选择不显示一些次要的内容。比如版块页下方的快速发贴栏里右端的表情选择: @media screen and (max-width: 575.98px) { #fastsmiliesdiv { /* 快速发贴框右侧的表情栏 */ display: none; } }
对于Discuz设置的固定宽度的内容,我们需要设法更改设置。比如在common.css里对页头有最小宽度的设置: #toptb { min-width: 960px; } 我们可以删掉这个语句,或者在不修改这个文件的前提下,在我们自己添加的风格文件里加上 #toptb { min-width: unset; }
还有在手机上如果输入框里的字体小于16px的话,点击输入框来输入文字时手机会自动放大网页,造成页面的跳动。而Discuz默认设置是14px,所以对小型设备,我们要将输入框里字体设成16px: @media screen and (max-width: 767.98px) { input,button,select,textarea { font-size: 16px; } }
加上类似这样的风格语句后,我们的网页就可以成为一个自适应的网页,比如板块页在手机上就成了上方右图的样子。

发表评论 评论 (8 个评论)

回复 天香公主 2018-10-18 10:06 AM
東里山人: 这主意好,比使用收费手机模板都好。我还在模板加上对移动端访问的判断,让部分元素不生成,不过CSS的调整依旧是个绣花活。 ...
同感
回复 東里山人 2018-10-18 04:49 AM
这主意好,比使用收费手机模板都好。我还在模板加上对移动端访问的判断,让部分元素不生成,不过CSS的调整依旧是个绣花活。
回复 天香公主 2018-10-15 10:05 PM
Hmily: 感谢香香公主(这样叫比较亲切),建议把诸多改动提交到官方吧git,让更多人受益http://git.oschina.net/ComsenzDiscuz/DiscuzX ...
谢谢鼓励,不敢不敢
回复 Hmily 2018-10-15 02:29 AM
感谢香香公主(这样叫比较亲切),建议把诸多改动提交到官方吧git,让更多人受益http://git.oschina.net/ComsenzDiscuz/DiscuzX
回复 天香公主 2018-10-7 11:09 PM
牛肉炖土豆: 哇,这样也可以啊,
喜欢“手机上显示的自适应版块页”
不过感觉,电脑版好多弹出框,自适应是个问题
印象中很多弹出框都是很小的,在手机上显示应该没问题。

弹出框的大小是由框内的内容决定的,所以就像我们需要对每一页做调整让它的宽度不超出手机的宽度,我们对大的(即内容多的)弹出框(如快捷导航框)里的内容需要做些调整。

感觉光用css的调节能解决绝大多数的问题,但要完全匹配供手机专用的网页,也许还需要做些额外但还是简单的改动。比如快捷导航框在手机里也许更适合作为一个网页出现。
回复 天香公主 2018-10-7 11:03 PM
ladyff: 思路很好。但是这样处理对于具体的页面问题比较多啊。
比如说论坛、文章页面,用户头像,签名的处理等。。。工作量也不小
感觉其实最好的办法还是用流布局重新写 ...
对,需要检查每一页在手机上有什么需要调整的。但工作量也不是很大,因为每页上需要处理的问题都是类似的(比如很多页上都有table/grid,我们怎样才能让它的宽度缩小到手机可以显示的范围内呢?无非就是隐藏最次要的表列,再让一般重要的表列占据尽可能小的宽度但也许还要求内容能显示在一行里,然后让最重要的表列占据最大的宽度),而且很多css风格在多页上使用,所以为某一页改了些风格后,也许其它一些页就已经自动调整好了。
回复 牛肉炖土豆 2018-10-7 10:24 PM
哇,这样也可以啊,
喜欢“手机上显示的自适应版块页”
不过感觉,电脑版好多弹出框,自适应是个问题
回复 ladyff 2018-10-2 09:16 AM
思路很好。但是这样处理对于具体的页面问题比较多啊。
比如说论坛、文章页面,用户头像,签名的处理等。。。工作量也不小
感觉其实最好的办法还是用流布局重新写一套模版。但是工作量更大

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2018-10-23 08:32 PM , Processed in 0.057217 second(s), 8 queries. ,ApcOn

返回顶部