如何优雅的实现手机站和pc站切换?

Question

以这个站为例:
http://tslogo.com/gen/
这是pc站

然后我用手机站的ua去访问:

然后这是手机站

就是这样的

但是他的域名http://tslogo.com/gen/都没有变化
感觉前端代码都也没什么变化
请问他是怎么优雅的实现的切换呢?

按照的理解 ,都是做域名跳转, 比如访问www.的时候,做判断跳转到m.开头的二级域名,但是他这个完全没有变化!

Answer 1

有两种实现方式：

1. 直接把网站做成响应式的，优点是根据屏幕大小自适应，可以直接前端实现，目前这种响应式的 CSS 框架一大把，直接 Github 上找，bootstrap、foundation等；

2. 直接在后端根据用户的 UA 来判断使用哪套模板，在渲染之前的模板选择上做手脚，这种必须依赖一门后端语言，比如 NodeJS，PHP 等，可以直接使用的库：；

Answer 2

php代码判断，判断浏览器头，你看的网站不是css自动适配，属于最低级的实现方法，就是各写各的

Answer 3

前端响应式布局啊

Answer 4

直接用响应式CSS来开发会更方便，使用CSS本身的媒体查询属性来进行样式的控制

楼主提供的这个网址，在960、1024这两个宽度的时候都手动地修改了相应的CSS

具体查看：http://tslogo.com/gen/wp-cont...

而且他这个加载是在打开页面的时候进行设置的，也就是说如果窗口进行了Resize，也没有对应的响应式样式。

看一下我的博客：http://sheilacat.github.io/

我博客直接套用了某个hexo主题，然后hexo主题本身是响应式的

媒体查询代码：

具体查看：
http://sheilacat.github.io/cs...

个人感觉媒体查询已经很优雅了，但是基本上前后风格还是差不多的。

如果前后风格差距较大的，可以选择根据网站宽度来加载不同的CSS。

Answer 5

可以做成， 响应式布局。

Answer 6

做成响应式布局的话会更灵活,不需要判断UserAgent,显示效果随设备分辨率改变而改变. 不过IE8浏览器不支持CSS3媒体查询,要支持小分辨率下IE8可以考虑用百分比布局和JS控制样式. 好在移动设备上没有IE8,所以手机平板的网站可以忽略对小分辨率下IE8的支持,也就是说可以用媒体查询.

Answer 7

只能说网站使用了 PC跟移动兼容的前端框架