Issue: My website functions properly on desktop but has a problem with the carousel images skewing on iPhones. To address this, I created a separate CSS styling for iPhone devices and used a JavaScript function found online to detect iPhones and iPads.
Unfortunately, it seems that the same changes are being applied to Android devices which is not desired. The current JavaScript code used to detect iPhone and iPad devices is as follows:
<script language=javascript>
function isApple(userAgent){
var iPhone = userAgent.match(/iPhone/i) !== null;
var Apple = userAgent.match(/Apple/i) !== null;
var Mac = userAgent.match(/Mac/i) !== null;
var iPod = userAgent.match(/iPod/i) !== null;
var iOS = userAgent.match(/iOS/i) !== null;
return iPhone || Apple || Mac || iPod || iOS;
}
if(isApple(navigator.userAgent)){
document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/assets/bootstrap/css/iphone.css">');
}
</script>
The CSS styling for iPhones includes specific height adjustments to prevent image skew in carousels:
/* Portrait and Landscape iphone*/
@media only screen
and (max-device-width: 480px)
and (orientation:portrait) {
#homepage .carousel .item { height: 150px !important;}
#homepage .carousel .item img { max-width: 100%; height: auto; display: block; }
}
@media only screen
and (max-device-width: 480px)
and (orientation:landscape) {
#homepage .carousel .item { height: 250px !important; }
#homepage .carousel .item img { max-width: 100%; height: auto; display: block; }
}
I have organized my stylesheets in a certain order and suspect this may be causing conflicts:
<link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/theme/theme.min.css">
<!--- Bootstrap classes overrides --->
<link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/assets/bootstrap/css/bootstrap_overrides.css">
<!--- IPHONE classes overrides --->
<link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/assets/bootstrap/css/iphone.css">
<!--[if IE]>
<link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/ie/ie.min.css">
<link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/ie/ie_overrides.css">
<![endif]-->
<!--[if lte IE 9]>
<link rel="icon" href="/images/favicon1.ico" type="image/x-icon" />
<![endif]-->
Is the JavaScript approach for detecting iPhones and iPads correct? Should I create a separate stylesheet for Android devices? If so, a modified version of Javascript for detecting Android devices was found:
$(function isAndroid(userAgent) { // Wait for page to finish loading.
if(navigator != undefined && navigator.userAgent != undefined) {
user_agent = navigator.userAgent.toLowerCase();
if(isAndroid(user_agent.indexOf('android')) > -1) { // Is Android.
document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/assets/bootstrap/css/android.css">');
}
}
});
Any guidance on modifying these approaches would be highly appreciated.
Thank You