相比常見的Twitter Bootstrap，另一個比較不普及HTML framework──Foundation 5更較為適合作為手機應用 Mobile app 的UI介面，不論是用HTML+CSS+Javascript再用Phonegap之類製作的App、還是用UIwebView作UI的原生App。 不過，當Foundation 用在mobile 上製作responsive的app時，我對Foundation 5的breakpoint就不特別滿意，尤其是iPhone 6和6 plus出現後，當要處理iphone 6/6+ landscape和iPad portrait 的同時，那個不論不類的”medium”，也就是641 pixels 至 768 pixels的那個屏寬breakpoint就令我超不爽。 這是Foundation 5的預設breakpoints： 最小寬度 Min-width (em) 最大寬度 Max-width (em) small 40 medium 40.063 64 large 64.063 90 xlarge 90.063 120 xxlarge 120.063 當然，這只是我的個人意見啦。 解決不爽的方法，是自行定義各mobile view的breakpoint。 首先，先要了解各iPhone的screen display pixels，我從Kyle J Larson的這篇blog文找到了下面的一幅參考圖： 這是整理後各iPhone 屏寬和屏高的matrix： Display pixels Resolution (portrait)…