大家好，我是个前端菜鸟，最近被一个问题困惑。我发现有的网站手机站和pc站用的是通一个域名，比如都是链接但是手机站和pc站使用的模板却完全不同。这是怎么回事呢？是怎么实现的？谢谢啦
该网站可以通过判断User Agent类型（是否为手机）而在后端控制要执行的模板文件。比如在 Discuz! 就是这样。
如果不同UA下的HTML结构一样但渲染样式不同，那就是使用了媒体查询了。
分享一篇我的博客中的文章，Nginx配置网站适配PC和手机，相信这篇文章可以解决你的问题：http://xxgblog.com/2015/06/29/nginx-detect-mobile/
主要思路是通过HTTP请求的Header中的User-Agent可以区分客户端类型，具体代码在：http://detectmobilebrowsers.com/通过Nginx正则表达式判断客户端类型（PC还是手机）后，反向代理到不同的应用，或者展示不同的静态页面。
另外，我还开发了一个简单的游戏玩家社区，即使用上面博文中的思路实现区分手机设备和PC设备，可以尝试一下分别使用PC、手机打开这个网站：http://gw2.vsgames.cn/
比较常规的就是根据屏幕分辨率来展示不同的css样式呀
通过使用@media 来判断是哪个分辨率
@media
媒体查询
user-agent
服务器端通过user-agent（http报文中关于浏览器的信息）来判断用户是来自什么平台，相应的使用不同的模板来渲染。如果HTML结构完全一样则是用了 CSS3中的媒体查询@media，来使用不同的样式。（当然也有可能是服务器吐了不同的样式出来。。。。）
有几种方法1.根据浏览器user-agent判断浏览器是PC版还是移动版并在同一页面调用不同模板2.首页判断浏览器种类再跳转，我的网站日语翻译就采用了这种方法3.直接通过样式表提供对不同屏幕的不同样式支持，有现成框架可以用，比如bootstrap
我知道的是通过后端程序判断用户代理，跳转到子域名如：m.xxx.com
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（8）
该网站可以通过判断User Agent类型（是否为手机）而在后端控制要执行的模板文件。比如在 Discuz! 就是这样。
如果不同UA下的HTML结构一样但渲染样式不同，那就是使用了媒体查询了。
分享一篇我的博客中的文章，Nginx配置网站适配PC和手机，相信这篇文章可以解决你的问题：http://xxgblog.com/2015/06/29/nginx-detect-mobile/
主要思路是通过HTTP请求的Header中的User-Agent可以区分客户端类型，具体代码在：http://detectmobilebrowsers.com/
通过Nginx正则表达式判断客户端类型（PC还是手机）后，反向代理到不同的应用，或者展示不同的静态页面。
另外，我还开发了一个简单的游戏玩家社区，即使用上面博文中的思路实现区分手机设备和PC设备，可以尝试一下分别使用PC、手机打开这个网站：http://gw2.vsgames.cn/
比较常规的就是根据屏幕分辨率来展示不同的css样式呀
通过使用
@media来判断是哪个分辨率媒体查询user-agent
服务器端通过user-agent（http报文中关于浏览器的信息）来判断用户是来自什么平台，相应的使用不同的模板来渲染。
如果HTML结构完全一样则是用了 CSS3中的媒体查询@media，来使用不同的样式。（当然也有可能是服务器吐了不同的样式出来。。。。）
有几种方法
1.根据浏览器user-agent判断浏览器是PC版还是移动版并在同一页面调用不同模板
2.首页判断浏览器种类再跳转，我的网站日语翻译就采用了这种方法
3.直接通过样式表提供对不同屏幕的不同样式支持，有现成框架可以用，比如bootstrap
我知道的是通过后端程序判断用户代理，跳转到子域名如：m.xxx.com