0

Good morning all, I have made a facebook application that runs a simple php page in the background. The link is apps.facebook.com/wai-yuen-tong (Dont bother about the language, even i dont know it).

The scenario is-
1) The complete app is made using ajax. Theres only one page and the whole thing works using ajax.
2) The height of the page depends on the height of the background irrespective of the elements on the page. Height is calculated based on width of the background images to keep the aspect ratio.Elements needs to be placed exactly on the background whereever needed.

I made this app and it works fine for desktop version. Because we know that the iframe of facebook app is of 810px. So elements can be given absolute position based on where they are needed on the page.

But the problem comes when I use this app on mobile. On mobile there is no fixed width. The page need to be responsive according to the width of the device.(Height is automatically settled to keep the background image in aspect ratio.) So to make the page responsive(Elements adjusting according to height and width) I used percentage system. Thats where all the problems started. I got to know that % is only calculated based on width irrecpective of height. For eg margin-top:10% and margin-left:20% both will be calculated on the basis of width of the page.
1) If I make the page on chrome on one aspect ratio screen. When on mobile. The aspect ratio changes. The background readjusts but the elements go out of place because % is still calculated based on width.
2) The app renders differently on safari, chrome,etc.
3) Switching the phone from portrait to landscape also ruins the formatting.

Thought solutions.
1) I thought of using script to change the position of elements. But that would need me to write the whole css inside script which is insensible.
2) I thought of using media sets but how many should I use as there would be so many different resolutions being used out there.
3) I thought to calculate % based on height in my script and assign it to elements but even the background in the app is changing on diferent pages.
4) Would using different style sheets help???

Please help me in choosing what approach should I use to solve this problem. This thing is really screwing me.

4

1 に答える 1

1

考えただけですが、CSS Media タグを使用してさまざまな画面サイズをターゲットにし、それに応じて CSS を更新しないでください。

メディア タグを使用すると、画面の向きと携帯電話をターゲットにすることができます。

関連する以前の Stack AQ を紹介します。

画面サイズの CSS メディア クエリ

ここにいくつかのコードがあります

/* 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 */
}
于 2013-08-27T05:47:48.923 に答える