Susy/Compass手機第一個網格不能在移動設備上工作

我最近做了一個快速的投資組合網站，我仍然在調整過程中，但我使用了一個susy網格，當我調整它的尺寸時瀏覽器，它仍然看起來如何我期望它看起來。我本質上有三個斷點，一個用於瀏覽器，一個用於平板電腦，另一個用於手機。Susy/Compass手機第一個網格不能在移動設備上工作

唯一的問題是，當我將其加載到我的手機（HTC Desire）上時，縮放似乎沒有了，而且它正在調整它的中間斷點（平板電腦）。

我設置的休息是：

$break-medium: 30em $total-columns; 
$break-large: 60em $total-columns;

該網站是here

我也注意到，當你放大的部位，然後需要水平滾動，這是我試圖避免的！實際上Susy網站也沒有這樣做。

來源

2013-01-15 Carrie Hall

這實際上與Susy沒有任何關係，或者讓你的斷點正確。默認情況下，移動Safari瀏覽器的視口寬度爲980像素，因此它可以處理不適合移動設備的網站。如果您建立了適合移動設備的網站，則必須讓Safari知道。例如，請參閱automatic zoom on iphone safari。你可能想要這樣的東西：

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2013-01-15 17:07:45

同意，如果我是你，我會看看bootstrap和or boilerplate來找出你的頁面的

可能丟失的其他魔法。這就是我每次都必須從頭開始做的事情 - 我去看看這些大男孩在做什麼;） –

呃！菜鳥錯誤，我只是一起錘擊網站，並會考慮優化它，一旦我得到了它。現在它工作正常。謝謝 –

嘉莉，

我不知道你的HTC Desire的分辨率 - 但是一個工具，我用它來檢查我的「突破點」爲響應式設計適當的擊穿是這一個：

http://www.josscrowcroft.com/2011/code/window-size-bookmarklet/ https://github.com/josscrowcroft/Window-Size-Bookmarklet

這是張貼視口的大小，一個書籤。在谷歌瀏覽器的Mac上，但我發現這個數字是「關閉」大約相同數量的像素作爲滾動條寬或類似的東西。所以這並不完美 - 但它確實有助於解決問題。

我會看看你的EM是否符合你的期望像素寬度的細分，並看看是否符合你的宏達電 - 也可能會EM一路上弄糟（瀏覽器設置，你的HTML對象沒有適當的設置等）。你總是可以嘗試通過將其設置爲一個固定的像素寬度來進行測試，然後再次對所有的數學表達式進行測試。

我不知道這會有所幫助，但至少你現在在你的腰帶工具多了一個選項（如果你已經不知道這一個是;）

好運&歡呼聲， -Jeremy

來源

2013-01-15 13:08:18

謝謝你，我以前沒有見過這個工具，但它太棒了！我現在來看看他們的時間，謝謝你的幫助:-) –

沒問題嘉莉，如果你發現這樣的其他工具，請隨時發送給我的方式！ https://plus.google.com/111783589266137495728 –

Susy/Compass手機第一個網格不能在移動設備上工作

回答

相關問題