在過去的時代裡，常常用PhotoShop裁切圖片並轉成網頁。
美工人員只要專心畫圖(分成一般版與手機版)，並將圖片交由網頁人員。
網頁人員利用PhotoShop裁切圖片並轉成網頁即可做出美美的網頁(分成一般版與手機版)
注意事項：
裁切成網頁時，會出現小小的細邊。該如何處理？
設定底圖顏色跟出現細邊的圖片顏色一致，就看不出來了。資料來源3的色碼轉換器。
那我們要如何讓程式判斷該往一般版還是手機版
假定
伺服器IP：192.168.199.54
一般版網頁檔名 general.html
手機版網頁檔名 mobile.html
程式碼：
<html>
<head>
<title>AuotOrientate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function AuotOrientate(){
if (screen.width >= screen.height ) {
document.location.href="http://192.168.199.54/general.html";
} else {
document.location.href="http://192.168.199.54/mobile.html";
}
}
</script>
</head>
<body onload="AuotOrientate()">
</body>
</html>
或是
<html>
<head>
<title>Changhua</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.onload=function AuotOrientate(){
if (screen.width >= screen.height ) {
document.location.href="http://192.168.199.54/general.html";
} else {
document.location.href="http://192.168.199.54/mobile.html";
}
}
</script>
</head>
<body>
</body>
</html>
資料來源：
1.網頁自動轉址/重新導向/URL重定向方法(HTML/Javascript/PHP的轉址)
2.js判斷螢幕解析度的程式碼
3.色碼轉換器
4.如何利用PHP語法來偵測是不是使用手機瀏覽網頁，新增手機用戶的客製選單
5.js判斷滑鼠是否停止移動Script
6.PHP Mobile Device Detection，簡單地用 PHP 判斷訪客的上網裝置
沒有留言:
張貼留言