10
回答
关于网页区分pc端和移动端,以及移动端各种适配问题
终于搞明白,存储TCO原来是这样算的>>>   

各位有哪个开发过一个web网页,在PC端上是没问题,但现在需要支持移动端的访问,应该还需要再开发一套UI吧,那么关于移动端各种版本(android,ios等版本),以及屏幕分辨率,横屏,触屏等各种的适配问题是如果解决的?是否有相应的开源项目?

望各位大神不吝赐教,多谢了。

举报
赛末点
发帖于4年前 10回/6K+阅

以下是问题补充:

  • @赛末点 :还有根据request头的user-agent属性值来区分不同终端会不太严谨,那么是否还有别的方法来区分呢? (4年前)
共有10个答案 最后回答: 4年前
流行的做法是根据 User-Agent判断设备类型,当然也能判断出iphone、android和平板,随后302到指定二级域名或目录下。用户可以随时切换到其它设备模板,比如用手机浏览发现移动版功能不足,可能需要切换到PC版浏览,用户点击这个切换链接或按钮时记录到COOKIE中,下次就以COOKIE为准,当然用户也可以随时切换回去。个人比较推荐是在服务端做处理,可以减少模板映射,毕竟给移动端额外添加action、控制器就会增加代码,麻烦!Spring Mobile 就可以减少这些代码,只需要做简单的一次性配置和为每个PC版页面添加对应的移动端页面就行,不需要添加额外的控制器或模板指向控制。小弟翻译了一篇《 深入浅出 Spring Mobile 中文文档 》文章,可以参考参考,水平有限翻译不足还请谅解。
--- 共有 3 条评论 ---
赛末点回复 @人称小明哥 : 好的。还是要多谢你了,这个我再研究一下。 4年前 回复
迷途蜗牛回复 @赛末点 : 我对前端没研究,就不误导你了^_^ 4年前 回复
赛末点你好,非常感谢你的回答。你翻译关于spring mobile的文档我也了解了,并且也进行了一些测试,还是很实用的,并且在终端的识别准确率很高(我测试了几个终端都没发现问题)。关于UI的交互性以及兼容性这一块,我的想法是用一些第三方的框架,如jquery.mobile,bootstrap,请问你是否有什么好的建议呢?如在响应是分为几种(PC端,平板电脑,手机端)? 4年前 回复
jquery.mobile
--- 共有 4 条评论 ---
Andy回复 @赛末点 : 只能根据agent,别无它法 4年前 回复
赛末点你好,用agent是会弊端的,这个信息可以模拟,并且还做不到100%准确,或者你那里有可以有很高的准确率的代码可以分享一下 4年前 回复
Andy回复 @赛末点 : 在应用的入口里根据终端的agent判断,然后路由到不同的适配页面 4年前 回复
赛末点你好,刚才我了解了一下jquery.mobile确实是为移动端进行设计的,我写一个demo进行测试一下。我在补充说明中说的那个问题,关于区分终端的问题,请问您是否有什么好的想法? 4年前 回复
楼主用PC以及手机访问:www.bugxm.com,看要的是不是这种效果。
--- 共有 2 条评论 ---
迷途蜗牛回复 @赛末点 : 嗯,这是结合spring mobile 和国外的某个模板改的,支持移动设备和平板设备,由于重心不在此处就没有调整兼容,不过我想向楼主展示的是一种思路,而不是页面本身,而且我也相信CSS兼容是难不倒你的 4年前 回复
赛末点你好,我刚才进行了测试,发现ios下的safari,qq浏览器下的效果就很不错,但是在android下的uc浏览器就出现错乱了,如菜单,布局的混乱。。 4年前 回复
看我发的一段代码,有pc,移动端验证
--- 共有 4 条评论 ---
赛末点回复 @不正常的物种 : 你的是用客户端js进行效验的,spring有一个小扩展spring mobile。 4年前 回复
不正常的物种@赛末点 你要这样想,竟然他都改东西了,你何必还给他你想给他看的东西 4年前 回复
赛末点看到你直接发的帖子,你是用js来判断agent,这样的话可以直接在后台进行判断,是相同的判断,只是chrome的header是linux,而UC浏览器的header也是linux,并且这种方法有弊端的,agent可以模拟的。 4年前 回复
赛末点你好,请问你发的代码我在哪里看? 4年前 回复

千万不要以分辨率去判断。我之前做判断就走了不少弯路。

不同机子,不同浏览器获取的分辨率有非常大的区别啊!!

比较靠谱的做法是:主域名入口执行判断,根据平台来判断 是进入PC/手机版 - 炫彩版/精简版/极速版

手机版可以做多个二级域名,或者在域名后面带上get参数。

--- 共有 1 条评论 ---
赛末点嗯,我也没有想过要用分辨率来进行区分判断的。之前的想法是通过agent。不过还是要谢谢你的回答。 4年前 回复

给你个忠告:老实用agent就行千万别自作聪明,现代浏览器都可以设定agent,说明用户希望看到agent设定的样式,并且设定一个GET参数mobie以便于强制切换样式,
例如检测到agent为PC但是有个mobie=1,则表明用户希望强制切换到mobie样式;
如检测到agent为mobie但是有个mobie=0,则表明用户希望强制切换到PC样;


顶部