日志
自适应的Discuz网页
热度 6 |
现在用手机上网的比例越来越高，怎样能让这些用户在手机上也能愉快地浏览自己的网站呢？一般有这么几种做法：
Discuz官方提供过多种手机版。它们的共同特点手机上向服务器发的请求和电脑版基本上是用同样的脚本文件处理的，仅依赖不同的模板内容来提供不同的客户端界面。
标准版和极简版不使用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" />
这句话在电脑上不起作用，但在手机上则会产生明显的效果。因为手机在显示网页时会先按浏览器是高解析度设置来决定网页内容的布局，再缩小到手机屏幕的尺寸显示。所以一般手机上浏览器里可以显示很多内容，但字体可能异常的小。加了这句后手机就按屏幕的大小来显示网页内容了。这样做后，网页上的字看上去就大多了。比较下面的左图和中图可以看出差异。
但是这样做的后果是网页上的很多内容就显示在屏幕外了，需要用滚动条才能看到。出现这种情况一方面是因为有些网页内容有固定的宽度设置，另一方面是有些内容显示出来的宽度超出了屏幕宽度。
我们可以用加媒体查询（media query）条件的css风格语句来依据浏览器可视区域（viewport）的大小来调节网页显示的内容，使得显示内容的宽度不超过可视区域的宽度。首先我们要决定大型和小型设备的划分。当今最流行的响应式网页设计框架Bootstrap 4.1是这样设置临界点的(链接):
我们接下来的讨论也按此来对小型设备添加特别的风格。
在小型设备上，我们可以选择不显示一些次要的内容。比如版块页下方的快速发贴栏里右端的表情选择：@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;
}
}
加上类似这样的风格语句后，我们的网页就可以成为一个自适应的网页，比如板块页在手机上就成了上方右图的样子。
- 手机APP(mobile app) 提供网站APP
- 手机版(dedicated mobile design) 设计专门的网页给手机用户使用
- 自适应式(又称响应式)网页设计(responsive 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.0 | iPhone和安卓等智能手机 | template/default/touch | static/js/mobile | static/image/mobile | 使用html和js |
| 新触屏版 | Discuz! X3.4 | iPhone和安卓等智能手机 | template/default/m | template/default/m/js | template/default/m/css | 使用html和js |
但是这些手机版都只支持论坛，所以不适合以博客为主的网站。而且在新型智能手机上的浏览器和电脑上一样支持html5和javascript的情况下，仅仅因为手机屏幕小就得单独造一套页面/模板，也有些不值，还容易造成电脑和手机页面的脱节。另一种做法是只使用一套页面/模板。用css风格来调节页面使之能在大小不同的设备上都能合适的显示，这就是自适应网页设计的想法。本文讨论下在对Discuz网站做不多的改动后，就可以使之产生自适应的效果。在前文（链接）中，我们讨论过Discuz提供的窄屏和宽屏两种风格。窄屏就是不管浏览器的大小，网页内容的宽度都固定为960px。宽屏则是网页内容占据了整个浏览器的宽度，但不小于960px。我们的修改是在宽屏的基础上去掉最小宽度的限制，因而成为可以适合任何尺度浏览器的全屏风格。
迈向自适应的第一步是在网页头部加上自适应meta标签：
| 手机上显示的版块页 | 手机上显示的版块页（加了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) |
在小型设备上，我们可以选择不显示一些次要的内容。比如版块页下方的快速发贴栏里右端的表情选择：
对于Discuz设置的固定宽度的内容，我们需要设法更改设置。比如在common.css里对页头有最小宽度的设置：
还有在手机上如果输入框里的字体小于16px的话，点击输入框来输入文字时手机会自动放大网页，造成页面的跳动。而Discuz默认设置是14px，所以对小型设备，我们要将输入框里字体设成16px：
加上类似这样的风格语句后，我们的网页就可以成为一个自适应的网页，比如板块页在手机上就成了上方右图的样子。
全部作者的其他最新日志
发表评论 评论 (16 个评论)
- 回复 carry0987
- 天香，我有個問題想請教一下，位於discuz.htm的這段代碼，關於 "每兩個版塊就創建一個 <tr> 的標籤，以維持左右各一個版塊" 的部分，我將關鍵節錄如下:
https://gist.github.com/carry0987/8a92aa664d4fda4b1e23971b4fb9c16d
dz的变量好難理解啊....我只是想試試每兩個版塊分成一組...
- 回复 carry0987
- 寫好了~
https://github.com/carry0987/PHP-Template-Engine
順道一提，我加入了緩存至數據庫的選項，這樣感覺cache的資料夾比較乾淨233
- 回复 天香公主
- https://github.com/txgz999/discuz/wiki
carry0987: 天香，請問你的Github名子是? 我想在感謝名單中加上你的Github名稱..
- 回复 天香公主
- 我测试过了，你说的对
carry0987: 天香，關於搜索欄的文字輸入造成的放大問題，我有遇過，只要在viewport加入
user-scalable="no"就可以了
- 回复 东风
- Discuz在这方面落后了， 国外的许多平台都使用了Bootstrap, 比如Opencart。
天香公主: 只是个尝试，还不成熟和完善，所以也没把修改贴出来。我们单位里的网站在开发新版本，其中一个主要的变化就是使用bootstrap。原来那个网站只支持IE8，新版本出来 ...
- 回复 天香公主
- 只是个尝试，还不成熟和完善，所以也没把修改贴出来。我们单位里的网站在开发新版本，其中一个主要的变化就是使用bootstrap。原来那个网站只支持IE8，新版本出来后至少可以宣称支持所有现代浏览器了。
东风: 太好了，我先收藏下。
- 回复 天香公主
- 谢谢鼓励，不敢不敢
Hmily: 感谢香香公主（这样叫比较亲切），建议把诸多改动提交到官方吧git，让更多人受益http://git.oschina.net/ComsenzDiscuz/DiscuzX ...
- 回复 天香公主
- 印象中很多弹出框都是很小的，在手机上显示应该没问题。
牛肉炖土豆: 哇，这样也可以啊，
喜欢“手机上显示的自适应版块页”
不过感觉，电脑版好多弹出框，自适应是个问题
弹出框的大小是由框内的内容决定的，所以就像我们需要对每一页做调整让它的宽度不超出手机的宽度，我们对大的（即内容多的）弹出框（如快捷导航框）里的内容需要做些调整。
感觉光用css的调节能解决绝大多数的问题，但要完全匹配供手机专用的网页，也许还需要做些额外但还是简单的改动。比如快捷导航框在手机里也许更适合作为一个网页出现。
- 回复 天香公主
- 对，需要检查每一页在手机上有什么需要调整的。但工作量也不是很大，因为每页上需要处理的问题都是类似的（比如很多页上都有table/grid，我们怎样才能让它的宽度缩小到手机可以显示的范围内呢？无非就是隐藏最次要的表列，再让一般重要的表列占据尽可能小的宽度但也许还要求内容能显示在一行里，然后让最重要的表列占据最大的宽度），而且很多css风格在多页上使用，所以为某一页改了些风格后，也许其它一些页就已经自动调整好了。
ladyff: 思路很好。但是这样处理对于具体的页面问题比较多啊。
比如说论坛、文章页面，用户头像，签名的处理等。。。工作量也不小
感觉其实最好的办法还是用流布局重新写 ...
