移动端皮肤

来自istudylinux

移动端皮肤

PC和移动端屏幕大小不一衍生出来的问题,网页开发体现的是2倍图,3倍图[1]等等。有兴趣可以参考移动端常见小知识

移动端开发

网页的移动端开发一般有两种方法:

  1. 专门定制手机网页(比如:淘宝网手机端京东手机端
  2. 响应式布局(可以用手机看看bilili wiki,和灰机wiki的网站)

前者需要定制,专门针对相应的场景,重新绘图,写CSS样式,JS脚本,对接MW。难度地狱级!!!不过,mw官方已经有几款针对手机的皮肤,Minerva NeueWPtouch等。

后者,目前MW的几乎所有皮肤都支持响应式布局。

移动端应用场景

  1. PC端和移动端共用一套皮肤
  2. PC端和移动端分别使用各自的皮肤

针对第一种,则是直接使用默认的皮肤就行,默认的皮肤如果支持响应式布局,在手机上这就会出现比较合适的视图。否则就是缩小的PC端视图!

而第二种则需要在LocalSettings.php添加对应的代码。

配置

针对上述两种情况,进行下面两种配置。

共用

不用啥配置,只需要在LocalSettings.php里面添加$wgDefaultSkin = 'vector';就行了。

分别使用

## 将下面的代码添加到LocalSettings.php里面
## Default skin: you can change the default skin.
## Use the internal symbolic names, ie 'vector', 'monobook':
if (preg_match("/(mobile|webos|opera mini|android|blackberry|tablet)/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'minerva';
} else {
    $wgDefaultSkin = 'vector';
}

完整代码[2]

  • 参数1,"/(mobile|weos....)/i"正则匹配表达式,和参数2返回的字符串进行匹配
  • 参数2,$_SERVER['HTTP_USER_AGENT']获取用户使用的浏览器标识[3]
  • preg_match函数用于参数1能否在参数2找到,匹配到就立即停止,返回真,然后不会继续匹配后面的[4]
  • 判定完成后,根据结果设置wgDefaultSkin的值

调试(模拟手机)

  • 直接使用手机查看网站页面
  • 使用谷歌浏览器、火狐浏览器、360(极速)浏览器或者其他浏览器按下F12,点击图片中的指向。
    模拟按钮

注意

如果十分在意移动端的内容布局,则在写完文章后进行两边调试。

内容为主

先做内容再去搞装饰吧!

参考