LMLPHP官方网站兼博客移动站上线新闻
原文链接 : http://blog.lmlphp.com/archives/60 来自 : LMLPHP后院
经过周日的努力,一下午加晚上,LMLPHP 官方网站手机站和 LMLPHP 官方博客手机站正式上线。目前所有页面在 MI2 的自带浏览器,UC浏览器,百度浏览器和 Samsung Galaxy S4 mini 的 QQ 浏览器上显示均正常,效果还算比较满意,毕竟同样的内容要兼容在不同尺寸的设备上显示出来还是有些难度的。
在做手机站的时候,站点宽度设置都是100%,基本没有特别指定的宽度,HTML 结构尽量的简单,为的就是最大的兼容。同时也发现了一些问题,就是图片的展示不好弄。在 view-port 声明下,手机站的建设变的简单多了,网站的 PX 单位自然的变成了长度单位,同样的手机尺寸不同的分辨率,声明了 view-port 后一行显示的字数是同样多的,这是本人使用了 小米2 和 三星 Galaxy S4 mini 进行测试得出的结论。在做移动站的时候,深刻感受到因设备不同网站的功能也会有所不同,所以手机站独立模板才是更好的选择,我个人不建议使用 BootStrap 和一些非常复杂的前端框架来做。
如果在页面加载后,计算出手持设备对应的尺寸,然后将文档中图片的 width 和 height 属性进行等比缩小,图片的展示就会比较好看,本站现在的主体内容区域里面的图片都是设置了最大宽度为 90% ,这样有个缺点就是加载文档后,图片的高度属性失效,显示的高度很小,仅仅够显示出了 alt 属性,随着页面滚动和异步加载的触发,页面会不断的被撑大,而 PC 站页面是没有这个问题的,以后再不断的优化。
关于手机站开发应该使用什么度量单位来作为字体大小的单位?这个问题我在做手机站之前也看了大量的文章,诸如 em,pt,px,%(百分比)等,现在认为网站建设设置字体大小最好的单位应该是使用“px”,绝对不用再去怀疑了。
关于手机站开发是否应该使用独立域名或者独立 URL?本站的手机站是根据 UA(UserAgent) 来展示的,目前的一些新型网站也都是如此,完全没有必要开启独立域名,那样后期维护会非常麻烦。
如何切换本站 PC 站和移动站?系统默认按照 UA 来判断该显示哪个模板,当然也可以使用参数 theme=default|mobile 进行切换,default 参数显示默认的 PC 模板,mobile 参数显示移动设备模板。切换后将保持在该会话过程中显示该模板风格不变。如果只想单个网页显示一次某个模板,可以传递 theme 参数的同时传递参数 switch_theme_once 即可。
附上手机站和 PC 站切换链接:
LMLPHP 官网手机站链接:http://www.lmlphp.com/?theme=mobile
LMLPHP 官网 PC 站链接:http://www.lmlphp.com/?theme=default
LMLPHP 官方博客手机站链接:http://blog.lmlphp.com/?theme=mobile
LMLPHP 官方博客 PC 站链接:http://blog.lmlphp.com/?theme=default