Nignx配置网站适配PC和手机-php教程-PHP中文网

首页

后端开发

php教程

Nignx配置网站适配PC和手机

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 08, 2016 am 09:21 AM

http mobile quot rewrite

考虑到网站的在多种设备下的兼容性，有很多网站会有手机版和电脑版两个版本。访问同一个网站URL，当服务端识别出用户使用电脑访问，就打开电脑版的页面，用户如果使用手机访问，则会得到手机版的页面。

1、判断客户端的设备类型

要想让网站适配PC和手机设备，首先要能做出准确的判断。HTTP请求的Header中的User-Agent可以区分客户端的浏览器类型，可以通过User-Agent来判断客户端的设备。

无论是PC还是手机，由于操作系统、浏览器的多样性，自己来实现这个判断并不容易。好在国外有一套开源的通过User-Agent区分PC和手机的解决方案，可以直接使用：

http://detectmobilebrowsers.com/

由于本文使用Nginx，只要在网站上下载Nginx配置即可。

set $mobile_rewrite do_not_perform;

if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino") {
  set $mobile_rewrite perform;
}

if ($http_user_agent ~* "^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)") {
  set $mobile_rewrite perform;
}

if ($mobile_rewrite = perform) {
  # 手机
}

登录后复制

Nginx通过以上的配置，获取HTTP请求的User-Agent，使用正则表达式来匹配手机设备。

2、根据设备适配不同的页面

首先要准备好网站的PC版和手机版两套页面，通过之前对设备的判断，来反向代理到不同的版本：

location / {
	proxy_pass http://192.168.20.1;  # 电脑版
	if ($mobile_rewrite = perform) {
		proxy_pass http://192.168.20.2;  # 手机版
	}
}

登录后复制

如果是静态页面不需要反向代理，那么用root替换proxy_pass：

location / {
	root /html/pc;
	if ($mobile_rewrite = perform) {
		root /html/mobile;
	}
}

登录后复制

3、手机版链接到PC版

在用户打开页面后，如果进入了手机版，可能由于错误判断设备，或者用户想获取更多信息，可能会需要打开PC版。在手机版页面的底部，通常会有一个链接指向PC版：

可以通过在点击“电脑版”链接的时候用JavaScript设置一个Cookie来实现这个功能：

<a href="http://xxx.com/">电脑版</a>

登录后复制

同时在Nignx中加入判断，如果包含此Cookie则进入PC版：

if ($http_cookie ~ 'gotopc=true') {
	set $mobile_rewrite do_not_perform;
}

登录后复制

4、调试

完成以上配置后，可以通过Chrome浏览器来模拟手机、平板电脑等设备。

最后给出完整的Nginx配置：

server {  
	listen 80;
	
	set $mobile_rewrite do_not_perform;
	
	if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino") {
		set $mobile_rewrite perform;
	}
	
	if ($http_user_agent ~* "^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)") {
		set $mobile_rewrite perform;
	}
	
	if ($http_cookie ~ 'gotopc=true') {
		set $mobile_rewrite do_not_perform;
	}
	
	location / {
		proxy_pass http://192.168.20.1;  # 电脑版
		if ($mobile_rewrite = perform) {
			proxy_pass http://192.168.20.2;  # 手机版
		}
	}
}

登录后复制

以上就介绍了Nignx配置网站适配PC和手机，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

http状态码520是什么意思 Oct 13, 2023 pm 03:11 PM

http状态码520是指服务器在处理请求时遇到了一个未知的错误，无法提供更具体的信息。用于表示服务器在处理请求时发生了一个未知的错误，可能是由于服务器配置问题、网络问题或其他未知原因导致的。通常是由服务器配置问题、网络问题、服务器过载或代码错误等原因导致的。如果遇到状态码520错误，最好联系网站管理员或技术支持团队以获取更多的信息和帮助。

http状态码403是什么 Oct 07, 2023 pm 02:04 PM

http状态码403是服务器拒绝了客户端的请求的意思。解决http状态码403的方法是：1、检查身份验证凭据，如果服务器要求身份验证，确保提供正确的凭据；2、检查IP地址限制，如果服务器对IP地址进行了限制，确保客户端的IP地址被列入白名单或未列入黑名单；3、检查文件权限设置，如果403状态码与文件或目录的权限设置有关，确保客户端具有足够的权限访问这些文件或目录等等。

如何使用Nginx Proxy Manager实现HTTP到HTTPS的自动跳转 Sep 26, 2023 am 11:19 AM

如何使用NginxProxyManager实现HTTP到HTTPS的自动跳转随着互联网的发展，越来越多的网站开始采用HTTPS协议来加密传输数据，以提高数据的安全性和用户的隐私保护。由于HTTPS协议需要SSL证书的支持，因此在部署HTTPS协议时需要有一定的技术支持。Nginx是一款强大且常用的HTTP服务器和反向代理服务器，而NginxProxy

理解网页重定向的常见应用场景并了解HTTP301状态码 Feb 18, 2024 pm 08:41 PM

掌握HTTP301状态码的含义：网页重定向的常见应用场景随着互联网的迅猛发展，人们对网页交互的要求也越来越高。在网页设计领域，网页重定向是一种常见且重要的技术，通过HTTP301状态码来实现。本文将探讨HTTP301状态码的含义以及在网页重定向中的常见应用场景。HTTP301状态码是指永久重定向（PermanentRedirect）。当服务器接收到客户端发

使用http.PostForm函数发送带有表单数据的POST请求 Jul 25, 2023 pm 10:51 PM

使用http.PostForm函数发送带有表单数据的POST请求在Go语言的http包中，可以使用http.PostForm函数发送带有表单数据的POST请求。http.PostForm函数的原型如下：funcPostForm(urlstring,dataurl.Values)(resp*http.Response,errerror)其中，u

快速应用：PHP 异步 HTTP 下载多个文件的实用开发案例分析 Sep 12, 2023 pm 01:15 PM

快速应用：PHP异步HTTP下载多个文件的实用开发案例分析随着互联网的发展，文件下载功能已成为很多网站和应用程序的基本需求之一。而对于需要同时下载多个文件的场景，传统的同步下载方式往往效率低下且耗费时间。为此，使用PHP异步HTTP下载多个文件成为了一种越来越常见的解决方案。本文将通过一个实际的开发案例，详细分析如何使用PHP异步HTTP