Managing a simple single-page web application is proving challenging, as I strive to optimize its appearance across various devices.
The layout is stable on:
- Acer Laptop(1366 x 768) on Chrome, Firefox, and Opera
- HTC One X(720 x 1280) on Chrome, Opera, Firefox (few bugs)
- HTC One(1080 x 1920) on Chrome and Firefox (few bugs), not tested on Opera
However, the layout is distorted on:
- HTC Default Browser(tested on HTC One X/One)
- UC Browser (on HTC One X)
- Safari on iPhone 4S (up to date)
- Possibly IE, but no confirmation yet.
Distorted here refers to elements being misaligned with incorrect sizes, as if the main layout is disregarded.
Interestingly, Chrome and Firefox display correctly. Although Firefox encounters issues with my JQuery functionality.
You can check out the app itself by following this link: here
So, here's my dilemma:
How do I rectify the layout discrepancies in browsers listed under distortion? Despite extensive online research, many proposed solutions leveraging media queries have failed to offer a universal fix.
I'm currently employing the CSS snippet below, which successfully renders the layout on the mentioned devices and browsers:
@media only screen and (max-width: 2000px) {
//CSS content here
}
@media only screen and (min-width: 320px) and (max-width: 767px),
only screen and (min-device-width : 320px) and (max-device-width : 480px)/*iphone 2g-4s*/ {
//Additional CSS content for specific device width ranges
}
@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape),
only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
//Additional CSS content for landscape orientation
}