I recently created a mobile-friendly layout for my website,
To achieve this, I customized the CSS for smaller screens and utilized jQuery to dynamically apply the appropriate styles. I have set up two layouts with a width threshold at 940 pixels.
function adjustStyle(width) {
styleSheet = "";
width = parseInt(width);
if (width < 940) {
styleSheet = http_base_url + "/css/style-size-small.css";
} else {
styleSheet = http_base_url + "/css/style-size-normal.css";
}
if( $("#size-stylesheet").attr("href").lastIndexOf(styleSheet, 0) !== 0){
$("#size-stylesheet").attr("href", styleSheet);
}
}
$(window).load(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
While everything appears as expected on desktops, I encountered issues when testing the layout on different devices:
- Samsung Galaxy S II - default browser: functioning correctly
- Samsung Galaxy S II - Firefox: displaying a miniature unreadable desktop version despite lower screen resolution than the threshold
- Older iPhone with low resolution: still showing a tiny desktop version
It's evident that there is something amiss in the implementation, but I haven't been able to pinpoint the exact issue yet.