匿名
未登录
创建账号
登录
istudylinux
搜索
查看“移动端皮肤”的源代码
来自istudylinux
命名空间
页面
讨论
更多
更多
页面操作
阅读
查看源代码
历史
←
移动端皮肤
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
== 移动端皮肤 == PC和移动端屏幕大小不一衍生出来的问题,网页开发体现的是2倍图,3倍图<ref>https://blog.csdn.net/m0_48387335/article/details/120358167</ref>等等。有兴趣可以参考[https://blog.csdn.net/m0_48387335/article/details/120358167 移动端常见小知识] == 移动端开发 == 网页的移动端开发一般有两种方法: # '''专门定制手机网页'''(比如:[https://m.taobao.com 淘宝网手机端],[https://m.jd.com 京东手机端]) # '''响应式布局'''(可以用手机看看[https://wiki.biligame.com/wiki/%E9%A6%96%E9%A1%B5 bilili wiki],和[https://www.huijiwiki.com/wiki/%E9%A6%96%E9%A1%B5 灰机wiki]的网站) 前者需要定制,专门针对相应的场景,重新绘图,写CSS样式,JS脚本,对接MW。难度地狱级!!!不过,mw官方已经有几款针对手机的皮肤,[https://www.mediawiki.org/wiki/Skin:Minerva_Neue Minerva Neue],[https://www.mediawiki.org/wiki/Skin:WPtouch WPtouch]等。 后者,目前MW的几乎所有皮肤都支持响应式布局。 == 移动端应用场景 == # PC端和移动端'''共用'''一套皮肤 # PC端和移动端'''分别使用'''各自的皮肤 针对第一种,则是直接使用默认的皮肤就行,默认的皮肤如果支持'''响应式布局''',在手机上这就会出现比较合适的视图。否则就是缩小的PC端视图! 而第二种则需要在<code>LocalSettings.php</code>添加对应的代码。 == 配置 == 针对上述两种情况,进行下面两种配置。 === 共用 === 不用啥配置,只需要在<code>LocalSettings.php</code>里面添加<code>$wgDefaultSkin = 'vector';</code>就行了。 === 分别使用 === <pre> ## 将下面的代码添加到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'; } </pre> 完整代码<ref>https://www.mediawiki.org/wiki/Simple_mobile_skin_auto_change</ref> * 参数1,<code>"/(mobile|weos....)/i"</code>正则匹配表达式,和参数2返回的字符串进行匹配 * 参数2,<code>$_SERVER['HTTP_USER_AGENT']</code>获取用户使用的浏览器标识<ref>https://www.php.net/manual/zh/tutorial.useful.php</ref> * <code>preg_match</code>函数用于参数1能否在参数2找到,匹配到就立即停止,返回真,然后不会继续匹配后面的<ref>https://www.php.net/manual/zh/function.preg-match.php</ref> * 判定完成后,根据结果设置<code>wgDefaultSkin</code>的值 == 调试(模拟手机) == * 直接使用手机查看网站页面 * 使用谷歌浏览器、火狐浏览器、360(极速)浏览器或者其他浏览器按下F12,点击图片中的指向。[[file:浏览器模拟手机按钮.png|frame|模拟按钮]] == 注意 == 如果十分在意移动端的<b>内容</b>布局,则在写完文章后进行两边调试。 == 内容为主 == 先做内容再去搞装饰吧! == 参考 == <references /> [[分类:入门]]
返回至“
移动端皮肤
”。
导航
导航
首页
最近更改
随机页面
MediaWiki帮助
Wiki工具
Wiki工具
特殊页面
页面值
页面工具
页面工具
用户页面工具
更多
链入页面
相关更改
页面信息
页面日志