iPhone/iPad上的不同縮放比例

我正在努力爲我的朋友哥哥完成一個網站，並且一切（幾乎）都能正常工作。iPhone/iPad上的不同縮放比例

該網站是用一個居中的容器，從左側aprox 15-20％的空間建成。

問題是，當您在iPhone或iPad中打開它時，會縮小網站的大小，以便左側的空間被移除，文本將從屏幕開始的位置開始。我希望我解釋這個權利。

有沒有簡單的方法讓我改變這隻適用於移動設備？太糟糕了，我沒有任何經驗，當涉及到設計手機..

在此先感謝！

來源

2011-04-13 MstrQKN

你是如何在HTML頁面上留下保證金？可能是iPhone設備不支持的。您正在使用哪種版本的HTML？在哪個iPhone上測試過它（3G，4或其他）。 – Ravin 2011-04-13 11:05:12

您正在使用百分比將容器移動到左側？

你確定你沒有給容器固定的width和margin:0 auto;與CSS？然後把這個meta標籤放到HTML網頁的頭部，以便手機正確地對待它？

<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0;" />

因爲據我所知，你正在使用margin:0 auto;居中方法。

給容器一些填充，例如padding:1em;，你應該沒問題。 :)

來源

2011-04-13 11:06:55

對不起，我沒有移動它的百分比，寬度設置爲100％通過CSS，0填充和邊距，是自動必要的？謝謝你的幫助！這個meta標籤能幫助我們嗎？ – MstrQKN 2011-04-13 11:11:11

元標記調整視圖的大小，以便它只需要手機上需要的空間（我只使用android進行測試）。如果它的寬度是100％，那麼你如何獲得左邊的間距？ – 2011-04-13 11:12:35

@Jaoza Media你是如何解決的？ – 2011-04-13 11:51:48

您可以通過查看它的設備參數

<style type="text/css" media="screen and (max-device-width: 480px)"> 
    /*for iphone only*/ 
</style>

或另一種方式包括在頁面的頭一個css是創建僅用於移動設備的CSS文件mobile.css，包括這個由CSS下面的javascript： -

<script type="text/javascript"> 
    // checking if the device is iphone, ipod or ipad 
    if ((navigator.userAgent.indexOf("iPad") > 0) 
     || (navigator.userAgent.indexOf("iPod") > 0) 
     || (navigator.userAgent.indexOf("iPhone") > 0)) { 
     // including the css file 
     document.write("<link href='mobile.css' rel='stylesheet' type='text/css' />"); 
    } 
</script>

來源

2011-04-13 11:13:10

我試着你發佈的第一個代碼，我認爲它會工作。我只是不知道如何調整iPhone的網站，以便它增加一點空間。就像在apple.com上一樣，它給出了像5-10px的空間，這對我來說很合適。 – MstrQKN 2011-04-14 20:21:09

iPhone/iPad上的不同縮放比例

回答

相關問題