在不使用百分比的情況下使網站規模擴大

目前我正在創建一個響應式網站。我現在面臨的問題是響應式佈局（這不是我設計的，我只是實現設計的那個）的設計具有745px的固定寬度。當然，這不是大多數（如果有的話）平板電腦的寬度。在不使用百分比的情況下使網站規模擴大

例如，在寬度爲768px的iPad上，每邊都會有10px的邊距。這看起來不太好，也不是設計師如何處理它。

有沒有辦法讓網站在手機/平板設備上升級而不訴諸百分比值？設計的幾個部分依賴於固定的像素值，並且將整個設計轉換爲百分比值或多或少是不可能的。

例如，如果我只是在iPad上稍微放大，它看起來完全如預期。因此，如果我可以選擇強制將平板電腦設備放大到745像素寬度，然後保持不變，那就是我所需要的。但是，在搜索了一下之後，我還沒有發現任何東西。

一個CSS/HTML-only解決方案將是首選，但JavaScript也很好。

澄清更多：該解決方案的目標只能是在肖像模式下的平板電腦。智能手機和平板電腦在景觀中應該保持不變。

2012-11-19 JustAPoring

類似於[this]（http://stackoverflow.com/questions/3597977/how-can-i-get-my-website-to-be-zo- bot-out-by-default-on-mobilephones ）？漂亮的設備雖然 –

@NathanKot可能。正如我在編輯中澄清的，有沒有一種方法可以僅以這種方式定位肖像平板電腦？簡單地設置''會讓手機和平板電腦景觀陷入混亂。 – JustAPoring

另外，請注意，雖然我的測試手機似乎響應了'content =「width = 745」'，搞亂了手機設計，我的平板電腦根本沒有迴應。 – JustAPoring

你可以包括放大到您根據mediaqueries：

可以使用transform:scale();（有根據瀏覽器的前綴）和IE zoom:<x>，導致一些像這樣：

@your according media-query{ 
     -webkit-transform: scale(1.1); /* Safari 3.1+, Chrome */ 
     -moz-transform: scale(1.1); /* Firefox 3.5+ */ 
      -ms-transform: scale(1.1); /* IE9+ */ 
      -o-transform: scale(1.1); /* Opera 10.50+ */ 
       transform: scale(1.1); 
        zoom: 1.1;   /* old IEs*/ 
}

這應該有一個相當不錯的支持在瀏覽器中，並且不會混淆用戶體驗，通過禁用用戶進行縮放（就像你的javascript解決方案一樣）。

顯然這可能需要一些javascript調整以適應目標設備的視口的確切測量。

來源

2012-11-19 13:28:59 Christoph

我看過它，從我所看到的情況來看，這會比我的解決方案帶來更多的工作和問題。它不能完全工作（切割頁面的頂部像素），但這可能是可以修復的。此外，舊的IE瀏覽器不能做媒體查詢，所以這是多餘的:)我非常感謝你的努力，相反，我接受了你的建議，並且在我自己的解決方案中再次啓用了用戶放大功能，只限制了低端。我會接受你的回答，因爲我想把這個問題拋在身後。 – JustAPoring

你可能想稍微調查媒體查詢和改變CSS爲平板電腦：http://www.w3.org/TR/css3-mediaqueries/

來源

2012-11-19 09:29:43 adhocgeek

-1對於沒有正確閱讀我的問題。正如我已經說過的那樣，設計是相當有條件的。我不能簡單地更改這些值，並且所有內容都已經適用於媒體查詢。平板電腦的設計寬度爲745像素。臺式機更寬。 – JustAPoring

您只需要CSS解決方案，但聲稱無法更改CSS？媒體查詢是您需要使用的。如果你不能改變設計，那麼幾乎沒有什麼可以做的。 – adhocgeek

我可以改變CSS。我無法將基於745像素寬度的像素值的設計完全更改爲流體設計。我不是那個設計它的人，我只是實施設計的人，坦率地說，設計並非是以流動的價值觀念創造的，這對平板電腦來說可能不是最佳的，但它不是我的創作。請在正確地閱讀我的問題之前，快速下結論。 – JustAPoring

在不使用百分比的情況下使網站規模擴大

回答

相關問題