, I'm currently fine-tuning my portfolio website with the help of responsive and adaptive design using mobile_detect.php. The challenge lies in getting the codes to align perfectly for desktop and handheld devices.
To simplify testing on desktop before venturing into mobile troubleshooting, I recommend downloading the "User-Agent Switcher for Chrome" extension for Chrome from https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg. For Firefox, grab the "User Agent Switcher" extension from https://addons.mozilla.org/hu/firefox/addon/user-agent-switcher/.
My goal is to ensure that my website looks consistent across both mobile and desktop versions on Chrome and Firefox browsers. Here's a glimpse at the HTML structure:
To address image resizing on mobile and tablet screens, I've included the following JavaScript snippet in js/scripts-mobile.js:
// Vertical image resize for Mobile/Tablet Window height
$(document).ready(function(){
function horgalleryImagesSize(all) {
windowHeight = $(window).height();
if (all) {
$('.horgallery .images li').css({'max-height': windowHeight});
}
}
$(document).ready(horgalleryImagesSize); // Trigger calculation
$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME
});
And to style these elements accordingly, here are snippets from css/mobile.css:
.horgallery .images li { float: none; clear: both; display: block; position: relative; }
.horgallery .images img { float: none; max-width: 100%; max-height: 100%; }
.horgallery .images li { padding: 0 0 30px 0; text-align: center; }
Despite my efforts, there are some challenges. While my design shines on Chrome, Firefox displays images at full screen width but cuts off parts exceeding the screen height. Android mobile browsers encounter issues with image resizing as well.
I aim for vertical images to never surpass the screen height and hope to introduce swipe functionality later on. Genymotion emulator has been helpful for testing on Android 4.3.
Merging aspect ratios with real-time resizing remains a hurdle due to my lack of expertise in JavaScript. Santiago's suggestion brought minor relief on native Android browsers, while Chrome excelled and Firefox fell short. Safari compatibility remains unexplored.
It seems I must make peace with Firefox's behavior for now, while contemplating ways to calculate image aspect ratios for optimal resizing. Thanks to all who have contributed!
