Re: [討論] iPad & iPhone 網頁設計
※ 引述《evenwu (EvenWu)》之銘言：
: 目前我比較困擾的點
: 有沒有同時符合：iPhone可允許縮放，然後iPad固定不允許縮放的寫法？
: 畢竟iPhone較小，但iPad又剛好看一頁是沒問題的...
: 如果真的不行....server side偵測吐不同head...也可以接受就是了
: 但是不會寫XD
原本用 JavaScript 寫，evenwu 說不支援 XDDD
那就從伺服端語言下手吧，這裡用 PHP 為範例。
首先觀察兩種可能輸出的viewport情形：
1. iPhone 可允許縮放
<meta name="viewport" content="initial-scale = 1.0" />
2. iPad 固定不允許縮放
<meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />
iPad 的 viewport content 開頭與 iPhone 相同，僅多了 ", user-scalable = no"，
因此程式邏輯簡單地如下：
1. 由於 viewport 不影響桌機瀏覽器，輸出也不影響，因此預設就會輸出 viewport
2. 預設 viewport content 是可允許縮放的，即只有 "initial-scale = 1.0"
3. 偵測使用者代理程式 (User Agent)，若為 iPad ，改變 viewport content 為可縮放
，即加入 ", user-scalable = no"
PHP & HTML：
<?php
// 預設值
$viewport_content = "initial-scale = 1.0";
// 判斷User Agent 有無 iPad 字串
if ( preg_match('/iPad/', $_SERVER['HTTP_USER_AGENT']) ) {
$viewport_content .= ", user-scalable = no";
}
?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"" rel="nofollow">http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html lang="zh-TW" xmlns="" rel="nofollow">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iPad Detection</title>
<meta name="viewport" content="<?php echo $viewport_content; ?>" />
</head>
<body>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 122.117.209.183
討論串 (同標題文章)