Nignx konfiguriert die Website so, dass sie sich an PC und Mobiltelefone anpasst

Angesichts der Kompatibilität der Website auf mehreren Geräten gibt es für viele Websites sowohl Mobil- als auch Computerversionen. Wenn der Server beim Zugriff auf dieselbe Website-URL erkennt, dass der Benutzer von einem Computer aus zugreift, öffnet er die Computerversion der Seite. Wenn der Benutzer von einem Mobiltelefon aus zugreift, erhält er die mobile Version der Seite.

1. Bestimmen Sie den Client-Gerätetyp

Wenn Sie möchten, dass sich die Website an PC und mobile Geräte anpasst, müssen Sie zunächst in der Lage sein, genaue Urteile zu fällen. Der User-Agent im Header der HTTP-Anfrage kann den Browsertyp des Clients unterscheiden und das Gerät des Clients kann über den User-Agent ermittelt werden.

Ob es sich um einen PC oder ein Mobiltelefon handelt, aufgrund der Vielfalt der Betriebssysteme und Browser ist es nicht einfach, dieses Urteil selbst zu fällen. Glücklicherweise gibt es eine Open-Source-Fremdlösung zur Unterscheidung von PCs und Mobiltelefonen über User-Agent, die direkt verwendet werden kann:

http://detectmobilebrowsers.com/

Da In diesem Artikel wird Nginx verwendet. Laden Sie einfach die Nginx-Konfiguration von der Website herunter.

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 erhält den User-Agent der HTTP-Anfrage über die obige Konfiguration und verwendet reguläre Ausdrücke, um ihn an das mobile Gerät anzupassen.

2. Passen Sie verschiedene Seiten an das Gerät an

Bereiten Sie zunächst zwei Seitensätze für die PC-Version und die mobile Version der Website vor und führen Sie anhand der vorherigen Beurteilung des Geräts einen Reverse-Proxy für verschiedene Versionen durch :

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

Wenn es sich um eine statische Seite handelt, die keinen Reverse-Proxy erfordert, dann ersetzen Sie „proxy_pass“ durch root:

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

3 Verknüpfen Sie die mobile Version mit der PC-Version

Nachher Der Benutzer öffnet die Seite, wenn er eingibt. Für die mobile Version müssen Sie möglicherweise die PC-Version öffnen, weil Sie das Gerät falsch eingeschätzt haben oder wenn der Benutzer weitere Informationen erhalten möchte. Unten auf der Seite der mobilen Version befindet sich normalerweise ein Link zur PC-Version:

Sie können mithilfe von JavaScript ein Cookie setzen, wenn Sie auf „PC-Version“ klicken " Link Um diese Funktion zu realisieren:

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

Fügen Sie gleichzeitig ein Urteil zu Nignx hinzu. Wenn dieses Cookie enthalten ist, geben Sie die PC-Version ein:

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

4. Debuggen

Nach Abschluss der obigen Konfiguration können Sie kann das Mobiltelefon über den Chrome-Browser simulieren.

Abschließend wird die vollständige Nginx-Konfiguration angegeben:

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;  # 手机版
		}
	}
}

Das Obige stellt die Nignx-Konfigurationswebsite zur Anpassung an PCs und Mobiltelefone vor, einschließlich der relevanten Inhalte. Ich hoffe, dass sie für Freunde, die sich für PHP-Tutorials interessieren, hilfreich sein wird.