調整網站分辨率到移動設備屏幕大小的問題

我正在重新設計我的網站以根據屏幕分辨率獲得兩種佈局。一個對於任何屏幕1010px或更大都有1000px，另一個對於較小屏幕有675px。現在我正在使用以下視口標記：調整網站分辨率到移動設備屏幕大小的問題

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

此設置在桌面瀏覽器和iPad上正常工作。但是，Android和iPhone瀏覽器都不會正確顯示頁面，它們始於各級縮放。相反，我希望675像素的顯示屏能夠正確放大顯示，因此整個寬度都顯示在屏幕上。我試圖用：

<meta name="viewport" content="width=675px, user-scalable=yes">

它有點改善了iPhone版本，但迫使iPad的顯示尺寸較小，即使它有一個1,024像素寬屏幕。不太清楚如何解決這個問題。

順便說一句該網站是http://dendory.net

來源

2013-02-25 Dendory

還有更簡單的解決方法... [Ckeck this out]（http://khuntronak.blogspot.com/2013/12/how-to-fixsolve-screen-resolution.html） – 2013-12-11 17:28:07

-1

嘗試mediaqueries工作。它可以讓你定位一個設備來應用某些CSS屬性。您只需將其粘貼到樣式表中即可。我用它來創建響應式電子郵件。

下面是一個簡單mediaquery的例子：

@media screen and (max-width: 600px) { 
    .class { 
    background: #ccc; 
    } 
}

我希望這有助於！

來源

2013-02-25 23:12:51 Roy

我已經在使用這個，問題是內容全部放大而不是顯示整個頁面。這是不對的。如果屏幕寬度爲480像素，我希望顯示整個675像素的頁面，而不是讓設備放大。 – Dendory 2013-02-25 23:35:04

-1

您應該嘗試使用@media查詢。只需將這些應用於您的樣式表，並且您可以根據設備，大小以及您想要使用不同設備實現的目標，獲得總變量樣式。

例如

/* MOBILE PORTRAIT */ 
@media only screen and (min-width: 320px) { 
    body { 

    } 
} 

/* MOBILE LANDSCAPE */ 
@media only screen and (min-width: 480px) { 
    body { 

    } 
} 

/* SMALL TABLET */ 
@media only screen and (min-width: 600px) { 
    body { 

    } 
}

在這些你可以簡單地應用取決於設備的規模不同的風格，如下圖所示...

/* TABLET/NETBOOK */ 
@media only screen and (min-width: 768px) { 
    body { 

    } 

    /* COLUMN GRID */ 
    .g1,.g2,.g3 {display:inline; float: left} 

    /* 2 COLUMN GRID */ 
    .g1 {width:48.0%} 
    .g2 {width:48.0%} 
    .g3 {width:98.0%} 
} 

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */ 
@media only screen and (min-width: 1024px) { 
    body { 

    } 

    /* 3 COLUMN GRID */ 
    .g1 {width:31.333%} 
    .g2 {width:64.667%;} 
    .g3 {width:98.0%} 
}

這是非常有用的，如果你想擁有一個完全互動的網站所有設備。現在通常使用媒體查詢。

此外，媒體查詢通過大多數瀏覽器非常透明，這使得它們成爲「良好實踐」。 Check this out!

來源

2013-02-25 23:46:44 Epik

關於使用此技術的最佳方法是，您可以對某些設備寬度使用百分比寬度。例如，圖像。如果在只有480px寬的頁面上顯示600px圖像，則只需將寬度設置爲100％，以便在div中正確縮放。輕鬆完成！ – Epik 2013-02-25 23:50:20

你有沒有試圖消除初始規模= 1.0，只是有你的視區：

<meta name="viewport" content="width=device-width">

，然後使用媒體查詢在設計你的破發點。

來源

2013-04-18 15:03:05 Stephen

調整網站分辨率到移動設備屏幕大小的問題

回答

相關問題