我有關於響應式設計佈局的問題。我發現一些網站例如:http://www.asos.com,http://havenshop.ca。當我調整瀏覽器大小時,它不顯示移動網站。但是當我通過移動訪問時,它會顯示移動網站。並且URL正在更改爲m.xxx.com。我的問題是:爲什麼有些網站無法在桌面瀏覽器上測試響應?
這是什麼方法,我該怎麼做這樣?我的意思是沒有在桌面上顯示響應
無論如何檢查桌面上的移動網站以防萬一這種方法被應用?
最好的問候,
我有關於響應式設計佈局的問題。我發現一些網站例如:http://www.asos.com,http://havenshop.ca。當我調整瀏覽器大小時,它不顯示移動網站。但是當我通過移動訪問時,它會顯示移動網站。並且URL正在更改爲m.xxx.com。我的問題是:爲什麼有些網站無法在桌面瀏覽器上測試響應?
這是什麼方法,我該怎麼做這樣?我的意思是沒有在桌面上顯示響應
無論如何檢查桌面上的移動網站以防萬一這種方法被應用?
最好的問候,
如果您考慮重定向的實際工作方式,理論上它是完全可以理解的 - 「如果用戶使用移動設備,將其重定向到移動版本的站點」。問題是,當人們訪問您的網站時,他們的網絡瀏覽器不知道「我是移動設備」還是「我是臺式電腦」。相反,瀏覽器通過提供「用戶代理」來介紹自己,該用戶代理包括瀏覽器名稱,版本和有關操作系統的其他信息。
要重定向移動訪問者,您需要確定他們的瀏覽器是否是移動設備上的Web瀏覽器。您可以確定訪客正在使用哪個瀏覽器。您還可以查看其他內容,例如他們的屏幕分辨率以及他們是否接受移動設備通用的文件類型。下面我們列出了一些可用於將訪問者重定向到您網站的移動版本的方法。
由於手機的屏幕寬度通常較小,因此如果屏幕寬度小於或等於800像素,則可以將訪問者重定向到您的移動網站。您將此代碼放置在主網站代碼的頭部部分。在訪問您的網站時,這樣一來,JavaScript就看到瀏覽器的寬度和重定向到相應的網站
您可以使用下面的代碼來做到這一點:
<script type="text/javascript">
<!--
if (screen.width <= 800) {
window.location = "http://m.domain.com";
}
//-->
</script>
的.htaccess URL重寫重定向
您可以使用.htaccess重定向來根據瀏覽器支持的MIME類型傳輸訪問者。例如,如果用戶的瀏覽器接受包含WML(無線標記語言)的MIME類型,那麼很可能它是移動設備。
下面的代碼應該放在你的。htaccess文件:
RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule^http://m.domain.com%{REQUEST_URI} [R,L]
Reference網站:
它使用一種叫做用戶代理的概念。 https://msdn.microsoft.com/en-us/library/ms537503%28v=vs.85%29.aspx 在堅果殼它漂亮告訴你的瀏覽器是什麼,它是否屬於在移動平臺字符串它顯示了移動網站,如果桌面上,他們顯示桌面版本
您可以使用JS
如果(/安卓| webOS的| iPhone | iPad的|的iPod |黑莓| IEMobile |歌劇 迷你/ i.test(navigator.userAgent的)){重定向到移動版本}
在PHP中就可以實現這種方式。僅供參考,請查詢 http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm
<?php if (
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
stristr($ua, "Windows CE") or
stristr($ua, "AvantGo") or
stristr($ua,"Mazingo") or
stristr($ua, "Mobile") or
stristr($ua, "T68") or
stristr($ua,"Syncalot") or
stristr($ua, "Blazer")) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='mobile/index.php';
header ('Location: '.$location);
exit;
}
?>
感謝您的信息。如果我想在移動網站上看到使用桌面的源代碼。我能怎麼做 ? Thks – Ryo 2015-03-03 06:02:08
我沒有嘗試,但http://www.ampercent.com/check-site-source-code-design-mobile-theme-desktop-browser/9020/可能會幫助你。 – ketan 2015-03-03 06:05:28
再次感謝:)。有用。 – Ryo 2015-03-03 06:12:25