Chrome辅助手机网页开发

此需求始于Discuz插件开发,能方便的调试手机插件。

手机解析discuzcode

手机版解析discuzcode,需要在指定 页面嵌入-手机版 的脚步名称,如果和普通版写在同一个文件中,那么脚本名称和普通版的相同

页面嵌入-手机版

页面嵌入-手机版

之后手机版的页面嵌入需要以 mobileplugin_开头。嵌入点名称和PC插件有区别的,如global_header_mobile和global_footer_mobile,需要重新定义,直接调用父类的global_header及global_footer的返回值即可。嵌入点名称和PC插件相同的,如discuzcode,子类直接继承。

手机版模板

在插件template目录下新建 mobile和touch目录,分别是手机标准版和触屏版的模板

chrome模拟手机

F12审查元素,点击show drawer,点击Emulation,点击Toggle device mode

chrome_emu_0

chrome_emu_0

之后就能选择机型,模拟手机上的显示效果,还能查看源码,对调试插件很有用。下面是一些效果图

chrome_emu_2

chrome_emu_2

数学公式及代码高亮能够正确的显示,markdown代码也正常解析了

chrome_emu_3

chrome_emu_3

chrome_emu_4

chrome_emu_4

参考资料



本文遵从CC版权协定,转载请以链接形式注明出处。
本文链接地址: http://www.annhe.net/article-3259.html

2 thoughts on “Chrome辅助手机网页开发

发表评论

电子邮件地址不会被公开。 必填项已用*标注