HTML rendering differently on different browser and devices

Question

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.

May I recommend [this](http://www.google.com/search?client=safari&rls=en&q=responsive+web+design&ie=UTF-8&oe=UTF-8)? — Dimitri Vorontzov, Aug 27 '13 at 05:12
Had my problem been so simple I would have googled it myself. The problem here is to bring responsivness as well as keep elements perfectly on the background image irrespective of browser,orientation,resolution and device. — user1589754, Aug 27 '13 at 05:16
Hm... are you saying you want your app to be responsive, and also to display exactly the same in all browsers? — Dimitri Vorontzov, Aug 27 '13 at 16:44

score 1 · Answer 1 · edited May 23 '17 at 11:51

Just a thought, but why dont you uses CSS Media tags to target different screen sizes and update your CSS accordingly.

Using media tags you will be able to target screen orientation and mobile phones.

Heres a previous Stack AQ that i though relevant.

CSS media queries for screen sizes

here's some code

/* 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 */
}

HTML rendering differently on different browser and devices

1 Answers1