移动端皮肤
来自istudylinux
Istudylinux(讨论 | 贡献)2022年11月7日 (一) 15:48的版本
移动端皮肤
PC和移动端屏幕大小不一衍生出来的问题,网页开发体现的是2倍图,3倍图[1]等等。有兴趣可以参考移动端常见小知识
移动端开发
网页的移动端开发一般有两种方法:
- 专门定制手机网页(比如:淘宝网手机端,京东手机端)
- 响应式布局(可以用手机看看bilili wiki,和灰机wiki的网站)
前者需要定制,专门针对相应的场景,重新绘图,写CSS样式,JS脚本,对接MW。难度地狱级!!!不过,mw官方已经有几款针对手机的皮肤,Minerva Neue,WPtouch等。
后者,目前MW的几乎所有皮肤都支持响应式布局。
移动端应用场景
- PC端和移动端共用一套皮肤
- 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,点击图片中的指向。
注意
如果十分在意移动端的内容布局,则在写完文章后进行两边调试。
内容为主
先做内容再去搞装饰吧!