Re: [討論] iPad & iPhone 網頁設計
※ 引述《chph (chph)》之銘言：
: 原本用 JavaScript 寫，evenwu 說不支援 XDDD
XDDD 其實是支援的
只是iPad與iPhone的safari有特殊問題
第一次讀取頁面時，再用js去改meta是會正常生效
但是若是link到頁面，js改meta會造成判斷錯誤
顯示時會非常奇怪...
實驗後發現iPad放置為直立的時候，是正常
橫置的時候才會出現頁面寬判斷錯誤的問題
但是我變因控制的沒有很嚴謹
還需要再實驗才能得出真正的結果
（修改補充）
meta應該是在讀取整份html的時候safari先吃進去了
js修改後某些屬性無法被safari知道
但後來發現旋轉iPad的時候會重新init一次
所以旋轉後可能是有重讀meta屬性，才有變化
看來從伺服器下手會比較優
若用一些CMS的話，改程式會比較麻煩
尤其是在template裡面放php會造成一些安全問題
: 那就從伺服端語言下手吧，這裡用 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: 210.64.16.123
※ 編輯: evenwu 來自: 210.64.16.123 (04/05 15:10)
推
04/05 15:36, , 1F
04/05 15:36, 1F
→
04/05 17:32, , 2F
04/05 17:32, 2F
→
04/05 17:33, , 3F
04/05 17:33, 3F
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 3 之 4 篇)：