博客分类：
近几年来，随着手机和pad的普及，越来越多的用户选择使用移动客户端访问网站，而为了获取更好的用户体验，就需要针对不同的设备显示出最合适的匹配，这样就是近年来流行的“响应式web设计”。
响应式web设计是一种纯前端技术js、css等实现的针对不同设备访问同一网址看到不同的布局，是页面内容更适合当前设备阅读。但这个不是本文的重点，重点还是放在nginx如何实现上来。
本文要讲的的是如何使用nginx区分pc和手机访问不同的网站，是物理上完全隔离的两套网站(一套移动端、一套pc端),这样带来的好处pc端和移动端的内容可以不一样，移动版网站不需要包含特别多的内容，只要包含必要的文字和较小的图片，这样会更节省流量。有好处当然也就会增加困难，难题就是你需要维护两套环境，并且需要自动识别出来用户的物理设备并跳转到相应的网站，当判断错误时用户可以自己手动切换回正确的网站。
下面以为实例来说明如何实现上面的需求。明确的的需求：1.制作两个站点PC端网站www.264.cn，和移动端网站m.264.cn2.使用pc或移动设备访问任何一个域名都会跳到相应的站点。3.用户可以选择访问移动版还是PC版网站，移动版网站始终有切换到PC版的链接，PC版当网站通过手机访问时会提供移动版网站的链接。4.当用户选着访问其中一种类型的网站后，保存设置结果生效时间为24小时，当然长短可以自己设置。简单的服务器端实现方法有两套网站代码，一套PC版放在/usr/local/website/web，一套移动版放在/usr/local/website/mobile。只需要修改nginx的配置文件件，nginx通过UA来判断是否来自移动端访问，实现不同的客户端访问不同内容。这种方法的缺点是移动端和PC端用同一个域名，存在黑帽的嫌疑，而且UA并不是总是判断的准确，如果判断错误的情况下，用户不能手动修改访问的网站类型。关键的Nginx配置如下：
location / {#默认PC端访问内容
root /usr/local/website/web;#如果是手机移动端访问内容
if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC\-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT\-)|(SonyEricsson)|(NEC\-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi\-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG\-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC\-)|(SED\-)|(EMOL\-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" ){
root /usr/local/website/mobile;}
index index.html index.htm;}
纯客户端js实现方式下面这段代码放到首页&head&和&/head&之间即可
type="text/javascript"// &![CDATA[if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")&0){try{if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
//触屏手机版地址
window.location.href="http://m.264.cn";}else if(/iPad/i.test(navigator.userAgent)){
//pad版地址}else{
//普通手机版地址
window.location.href="http://wap.264.cn"}}catch(e){}}}// ]]&
推荐的nginx区别手机和PC访问方法利用前端js和后端nginx配合，js通过设置cookie来设定当前访问哪页面。
增加设置cookie的js代码，这段代码需要在移动网站和PC网站的所有页面都要放置。
function createCookie(name, value, days, domain, path) {
var expires = '';
if (days) {
var d = new Date();
d.setTime(d.getTime() + (days*24*60*60*1000));
expires = '; expires=' + d.toGMTString();
domain = domain ? '; domain=' + domain : '';
path = '; path=' + (path ? path : '/');
document.cookie = name + '=' + value + expires + path + domain;}function readCookie(name) {
var n = name + '=';
var cookies = document.cookie.split(';');
for (var i = 0; i & cookies.length; i++) {
var c = cookies[i].replace(/^\s+/, '');
if (c.indexOf(n) == 0) {
return c.substring(n.length);
return null;}function eraseCookie(name, domain, path) {
setCookie(name, '', -1, domain, path);}
nginx增加如下配置，根据UA和cookie判断当前是移动端还是PC端访问
if($http_user_agent ~*'(Android|webOS|iPhone|iPod|BlackBerry)'){set $mobile_request '1';}if($http_cookie ~'mobile_request=full'){set $mobile_request '';}if($mobile_request ='1'){
rewrite ^.+ http://m.264.cn$}
移动版页面添加PC版链接默认用户进来时会先判断UA，如果是手机端访问就会进入手机版，但也会存在误判进入手机版或者需要更多信息进入PC版，那么就需要在移动版的页面放入代码，让用户可以从移动版切换到web版并且下次访问会保留设置。
onclick="setCookie('iphone_mode', 'full', 1, '264.cn')" href="http://www.264.cn"
如果用户访问不正确时，点击电脑版链接就可以进入PC版网站，并且24小时内再次访问会记忆上次访问的网站类型设置。
PC版网站增加访问手机版的链接在PC版的网站适当的地方加入下面的链接让用户可以切换到手机版的网站。
onclick="deleteCookie('mobile_mode', '264.cn');" href="http://m.264.cn"
完整的nginx端配置，当然是去掉了与本文功能无关的配置，并不是一个完可用的配置，只是给大家一个整体的框架。
PC版网站配置
upstream app_server {
server 0.0.0.0:9001;}
listen 80;
server_name www.264.cn;
root /path/to/main_site;
location / {
proxy_set_header X-Real-IP $remote_addr;
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
set $mobile_request '1';
if ($http_cookie ~ 'mobile_request=full') {
set $mobile_request '';
if ($mobile_request = '1') {
rewrite ^.+ http://m.264.cn$
# serve cached pages ...
if (!-f $request_filename) {
proxy_pass http://app_
手机移动版配置
upstream m_app_server {
server 0.0.0.0:9001;}
listen 80;
server_name m.264.cn;
root /path/to/mobile_site;
location / {
proxy_set_header X-Real-IP $remote_addr;
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
set $mobile_request '1';
if ($http_cookie ~ 'mobile_request=full') {
set $mobile_request '';
if ($mobile_request != '1') {
rewrite ^.+ http://www.264.cn$
# serve cached pages ...
if (!-f $request_filename) {
proxy_pass http://m_app_
浏览: 574406 次
通过pom上传报错 Artifact upload faile ...
百度网盘的挂了吧???
UfgovDBUtil 是什么类
帮大忙了，非常感谢
十分感谢作者无私的分享，仔细阅读后很多地方得以解惑。
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'手机端和PC端两个站点，用同一个域名访问可以吗？
[问题点数：40分]
本版专家分：0
结帖率 20%
CSDN今日推荐
本版专家分：0
本版专家分：0
结帖率 20%
本版专家分：6540
2016年9月 Web 开发大版内专家分月排行榜第三
本版专家分：0
本版专家分：0
结帖率 20%
本版专家分：6540
2016年9月 Web 开发大版内专家分月排行榜第三
本版专家分：0
结帖率 20%
本版专家分：6540
2016年9月 Web 开发大版内专家分月排行榜第三
本版专家分：0
结帖率 20%
本版专家分：6540
2016年9月 Web 开发大版内专家分月排行榜第三
本版专家分：0
结帖率 20%
本版专家分：0
匿名用户不能发表回复！|
CSDN今日推荐为了账号安全，请及时绑定邮箱和手机
关于移动端和PC端共用同一个域名的问题
大致情况是，我的网站针对移动端和PC是不一样的代码。类似陌陌官网，输入www.immomo.com 手机访问能去移动端的网页，而PC端访问显示的是PC端的网页。但是对外的用户域名都是我现在已经采用js写出了判断用户代理的代码，可以区分访问的是手机还是PC，但是这js代码放什么地方还不知道。请教各位大牛，这种同一域名如何怎么配置？
暂无任何回答
62201人关注
28714人关注
59515人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11正在初始化报价器求教各路大神 手机端和PC端两个站点，怎么用同一个域名访问gse86pc、手机站各一套控制器和模版，再加个判断跳转到不同控制器更多回答神罚120很简单
第一，你可以把PC和手机站点放在同一个服务器但不同文件夹，比如PC就放在根目录/下
手机就放地/m/下
然后定义一个二级域名 如：m.xxx。com
www开头就解析到根目标，而二级域名就解析到那个文件夹
最后，写一段程序判定访客是哪种终端访问，对应跳到哪一个就可以了为你推荐热门问答1234567891011121314151617181920查看更多21222324252627282930当前位置：
手机网站SEO：标题是否要和pc端一样
我手机端跟pc端用的一个数据库，但是手机端可以单独设置标题，是否必须和pc端一样，还是分别设置关键词?
PC端和移动端搜索结果展现标题和摘要的字数限制等都是不同的，可以参考这里的内容：
PC端30多个中文汉字才截断，移动端不到20个就折行了，20多个就省略看不到了。
所以，建议移动站使用单独的标题，描述，关键词。
但页面主体内容要一致，关键词要一样。
目前手机端SEO优化的话，主要是通过三个方式：
1、做好手机站，然后通过百度站长平台 进行适配，把pc端的排名适配给手机端。
2、手机站要采用cnd加速，保证。
3、手机站文章或产品末尾，要添加 推荐连接，减少跳出率。
上一课: 下一课:
来源：学做网站论坛 &&最后更新：&&浏览量：19724 次
学做网站论坛致力打造网站制作在线培训诚信平台，大批学员在此学会，走上IT精英之路。学做网站论坛建站培训以原创建站视频教程，以非常细致的讲解各类网站制作方法，哪怕是零基础小白也能看的懂，学的会。欢迎您来参加学习，报名QQ:。