我之前曾經有 iPhone 和 iPad ，但後來 iPad 拿去孝敬我爸之後，我只剩 iPhone 可以測了 (其實我是在等新款的 iPad)
iPhone 和 iPad 的瀏覽器基本上都是一模一樣的，除了size 有所差異。
如何模擬
Stackoverflow 找到了清楚的列表，在各種情況 iPad 的寬度和高度會是多少：
http://stackoverflow.com/questions/3375706/ipad-browser-width-height-standard/9049670#9049670
http://stackoverflow.com/questions/3375706/ipad-browser-width-height-standard/9049670#9049670
我後來改成由後端判斷或產生瀏覽器資料，因為 navigator.userAgent 沒辦法偷改。後端產生也會多少許多好處。以美妝邦來說，是由這一套 mobile detection，在 php 端產生一個字串，像是 "ios ipad touch tablet"，可以放到 <html>的 class 中供 css 使用，也可以給 javascript 來使用。再來網址開始支援一個特別的參數，比如說 ?fakepad=1 ，來啟動 假iPad 模式。接下來就依各種情況來模擬 iPad
- 如果原本沒就沒有設 viewport 的情況下，在iPad 中，直的或是橫的寬度都是 980 ，模擬 ipad 只要在 <head> 裡產生 <meta name="viewport" content="width=980" /> 即可
- 有設viewport，而width = device-width 時， 寬度都是 768
所以原本是
<meta name="viewport" content="width=device-width" />
模擬時要變成
<meta name="viewport" content="width=768" /> - 有initial-scale 就很複雜了，像 bootstrap 建議大家設
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
在模擬時，就需要改成
https://gist.github.com/girvan/5715525
主要影響的大概是 initial-scale 是否有設定，至於 user-scalable 應該是沒什麼差才是(我猜)。上述三種應該是最常用的，其它情況請自行研究了。於是我寫成 sopily / smarty 的 plugin
然後在樣版中這樣寫就可以了
<?=$_viewport('width=device-width, initial-scale=1.0, user-scalable=no')?>
螢幕線
高度要注意，因為 ipad 的 safari 在單一頁籤時會隱藏頁籤列，而也有部份的使用者會選擇「總是顯示書籤列」，所以上述的 stackoverflow 表中的高度都要扣掉一些。
螢募線也是重點之一，測試的時候都要大概推測一下，下列是我的推測方法。
螢募線也是重點之一，測試的時候都要大概推測一下，下列是我的推測方法。
橫的，原始 iPad 的高度 ▼
以 iPhone 模擬，橫的全螢幕，往上滑到網址列的一半，大概可以和 iPad 的高度差不多 ▼
直的 iPad ▼
iPhone 上的高度會略小一些▼
小結
iPhone 和 iPad 的市占率超高的，測這兩種真的是必需的。當然是有實機才是最好的，如果沒有，可以加減用這個方法來測試。另外最近三星的人越來越多，也歡迎參考模擬 Samsung s2 s3 的方法。
