在不同的瀏覽器和設備上呈現不同的HTML

Question

早上好， 我做了一個在後臺運行簡單php頁面的facebook應用程序。鏈接是apps.facebook.com/wai-yuen-tong（不要擔心語言，即使我不知道它）。

該場景是-
1）完整的應用程序使用ajax。 Theres只有一個頁面，整個事情使用ajax。
2）頁面的高度取決於背景的高度，而與頁面上的元素無關。高度根據背景圖像的寬度進行計算以保持寬高比。元素需要精確地放置在任何需要的背景上。

我做了這個程序，它適用於桌面版本。因爲我們知道Facebook應用程序的iframe是810px。因此可以根據頁面上需要的位置給出元素的絕對位置。

但是，當我在手機上使用這個應用程序時出現問題。在手機上沒有固定的寬度。頁面需要根據設備的寬度進行響應（高度自動調整以保持背景圖像的高寬比）。 爲了使頁面響應（元素根據高度和寬度進行調整），我使用了百分比系統。那就是所有問題開始的地方。我知道％只是根據寬度計算而不考慮高度。例如，margin-top：10％和margin-left：20％都將根據頁面的寬度計算。
1）如果我在一個高寬比屏幕上使用鉻制頁面。在移動時。高寬比變化。背景重新調整，但元素不合適，因爲％仍然是基於寬度計算的。
2）該應用程序在safari，chrome等渲染方式不同。
3）將手機從縱向切換到橫向也會破壞格式。

思想解決方案。
1）我想使用腳本來改變元素的位置。但是這需要我在腳本中寫出整個css，而這是無法理解的。
2）我想過使用媒體集，但我應該使用多少個，因爲會有那麼多不同的分辨率被使用。
3）我想在我的腳本中計算基於高度的％並將其分配給元素，但即使應用中的背景也在不同的頁面上發生變化。
4）會使用不同的樣式表幫助？

請幫我選擇我應該用什麼方法來解決這個問題。這件事真的讓我感到困擾。

Answer 1

只是一個想法，但爲什麼不使用CSS媒體標籤針對不同的屏幕尺寸並相應地更新您的CSS。

使用媒體標籤，您將能夠以屏幕方向和手機爲目標。

繼承人以前Stack AQ，我雖然有關。

CSS media queries for screen sizes

這裏的一些代碼

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
}