CSS Styling that only styles all IPhones and IPADS

Question

Problem: I have an image that is responsive in all platforms except for iphones.

On the Android version of the site, the following image is not skewing: enter image description here

On the iphone version of the site, it is blowing up the image and I am not sure.

I thought the following would resolve the skewing issue which it does except for IPHONES and IPADS

#homepage .carousel .item { 
    height: auto !important; 
} 

#homepage .carousel .item img { 
    min-width: 100% !important; 
    max-width: 100% !important; 
    height: auto !important; 
    position: relative !important; 
} 

.carousel-indicators { 
    bottom: 2%; 
}

That being said, I have also posted the rest of the css I did to make it responsive for different sizes:

/***TEST 1.2***/
#homepage .carousel .item { 
    height: auto !important; 
} 

#homepage .carousel .item img { 
    min-width: 100% !important; 
    max-width: 100% !important; 
    height: auto !important; 
    position: relative !important; 
} 

.carousel-indicators { 
    bottom: 2%; 
} 

@media screen and (max-device-width: 375px) and (max-device-height: 667px) {
	#homepage .carousel .item { 
		height: auto !important; 
	} 

	#homepage .carousel .item img { 
		min-width: 100% !important; 
		max-width: 100% !important; 
		height: auto !important; 
		position: relative !important; 
	} 

	.carousel-indicators { 
		bottom: 2%; 
	} 
}

@media (max-width:331px){
	.navbar-header{
		margin-left:-20px;
	}
	.navbar-toggle{
		position: relative;
		float: right;
		padding: 9px 10px;
		margin-top: 8px;
		margin-right: 0px; 
		margin-bottom: 8px;
		background-color: transparent;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
	}
}


@media screen and (max-width:331px) and (-webkit-min-device-pixel-ratio:0) {	
	#homepage .carousel .item img {
		min-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		margin-top: 71px;
	}
}
/*
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
	#homepage .carousel .item { 
    height: 200px !important; 
	} 

	#homepage .carousel .item img { 
		min-width: 100% !important; 
		width: 100% !important; 
		height: 200px !important; 
		position: relative !important; 
	} 
}*/


@media (min-width:729px) and (max-width:748px){
	#homepage .carousel .item img {
		min-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		margin-top: 71px;
	}
}

@media(max-width: 728px) and (orientation:portrait){
	#homepage .carousel .item img {
		min-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		margin-top: 71px;
	}
}

@media screen and (max-width: 728px) and (orientation:portrait) and (-moz-images-in-menus:0){
	#homepage .carousel .item img {
		min-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		margin-top: 0px;
	}
}

/*Firefox*/
@media screen and (max-width: 748px) and (-moz-images-in-menus:0) {
    #homepage .carousel .item img {
		min-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		margin-top: 0px;
	}
}

@media(max-width: 768px) and (orientation:landscape){
	#homepage .carousel .item img {
		min-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		margin-top: 71px;
	}
}

@media screen and (max-width: 768px) and (orientation:landscape) and (-moz-images-in-menus:0){
	#homepage .carousel .item img {
		min-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		margin-top: 0px;
	}
}

@media (max-width: 767px){
	.image-margin-top2 {
		margin-top: 182px !important;
	}
	.eventMargin {
		margin-top: -85px;
	}
}

@media (max-width:748px){
	#homepage .carousel .item { 
		height: auto !important; 
	} 
}

@media screen and (min-width: 766px) and (max-width:1024px){
	.carousel-caption{
		right:20%;
		left:15%;
		top:-4%;
	}	
	.titleSlide, h1{
		font-size: 33px !important;
	}	
	.content1{
		font-size:20px !important;
	}
}

@media screen and (min-width: 766px) and (max-width:1024px) and (orientation:landscape){
	.carousel-caption{
		right:20%;
		left:15%;
		top:14%;
	}	
	.titleSlide, h1{
		font-size: 33px !important;
	}	
	.content1{
		font-size:20px !important;
	}
}


@media screen and (min-width: 1025px) and (max-width:1280px){
	.carousel-caption{
		right:20%;
		left:20%;
		top:20%;
	}
}

@media (min-width:749px) and (max-width:767px){
	#homepage .carousel .item { 
		height: auto !important; 
		/*margin-top:71px;*/
	} 
}

@media screen and (min-width:768px) and (max-width:991px) and (-webkit-min-device-pixel-ratio:0) {
	#homepage .carousel .item { 
		height: auto !important; 
		margin-top:154px;
	} 
}

@media (min-width:783px) and (max-width:991px){
	.eventMargin{
		margin-top:-200px;
	}
	.image-margin-top2 {
		margin-top: 60px !important;
	}
}

@media (max-width:767px){
	.image-margin-top2 {
		margin-top: 176px !important;
	}
}

@media (min-width:768px) and (max-width:782px){
	.image-margin-top2 {
		margin-top: 62px !important;
	}
	
	.eventMargin{
		margin-top: -200px;
	}

}

@media (min-width:992px){
	.image-margin-top2 {
		margin-top: 57px !important;
	}
}

@media (min-width:992px) and (max-width:1024px){
	#homepage .carousel .item { 
		height: auto !important; 
		margin-top:20px;
	} 
}

I have used the following site to target IPhones and IPads but it has no effect on iphones or ipads: http://stephen.io/mediaqueries/. The image continues to skew.

Is there a way to detect when the site is being displayed on a iphone and ipad. Once it detects it, call another css file that is only for iphones and ipads?

I was able to find a line of code that will detect if its on the iphone but not sure how to modify it for both iphones and ipads. I did the following but it appears it does not detect whether or not the iphone or ipad is being detected:

        <script language=javascript>
        if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
            <link rel="stylesheet" href="/Regal-en-us/includes/themes/MuraBootstrap3/assets/bootstrap/css/iphone.css">
        }
    </script>

Any help would be appreciated.

Thank You

UPDATE

I used the following to detect whether a user is using a ipad or iphone:

    <script language=javascript>
    if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
        document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/includes/themes/MuraBootstrap3/assets/bootstrap/css/iphone.css">');
        alert("Hello1.1!");
    }
</script>

Which it does detect the iphone and ipad. However, the styling I am doing is not being detected. The following is the styling I am using for the iphone and ipad to style the carousel image:

#homepage .carousel .item { 
    height: auto !important; 
} 

#homepage .carousel .item img { 
    min-width: 100% !important; 
    max-width: 100% !important; 
    height: auto !important; 
    position: relative !important; 
} 

.carousel-indicators { 
    bottom: 2%; 
} 

/* Portrait and Landscape iphone and ipad*/
/*@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 760px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    #homepage .carousel .item { 
        height: 139px !important; 
        margin-top:285px !important;
    }
}*/
@media screen and (max-width:768px) and (orientation:portrait) and (-webkit-max-device-pixel-ratio:0) { 
    #homepage .carousel .item img {
        /*min-width: 100% !important;
        /*width: 100% !important;*/
        height: 293px !important;*/
        position: relative !important;
        margin-top: 200px;
    }
}

As you can see, it does not detect the media query but it is being recognized by IPAD and IPHONE because the alert goes off.

Any help would be appreciated.

UPDATE:

At this point, I would just like to make look nice on the iphone and ipad. I have been working on this for a while with no solution or headway on this

I wrestled a bear once. · Accepted Answer

You had the right idea, you just need to insert the link tag into the DOM.

function isAppleSafari(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;
  var Safari = userAgent.match(/Safari/i) !== null;
  return Safari && (iPhone || Apple || Mac || iPod || iOS);
}

// Use like this...
if(isAppleSafari(navigator.userAgent)){ 
  document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/Regal-en-us/includes/themes/MuraBootstrap3/assets/bootstrap/css/iphone.css">');
}

I used insertAdjacentHTML here to put it in the <head> of the page.

noSpoon · Answer

Your code seems all fine except the ratio thing. Try removing the (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio:0). If the ratio isn't correct you can't see the effect of you code, so try without it.

Cheers!

Mohammed · Answer

One thing I would suggest is using the vw and vh instead of the 100% since this masure the entire size of the screen rather than the div or whatever is the parent tag to it.

You can read more about it here : http://www.w3schools.com/cssref/css_units.asp

CSS Styling that only styles all IPhones and IPADS

Tags:

javascript

jquery

css

iphone

ipad

Roberto Flores

3 Answers

I wrestled a bear once.

noSpoon

Mohammed

Recent Activity

Donate For Us

CSS Styling that only styles all IPhones and IPADS

Tags:

javascript

jquery

css

iphone

ipad

Roberto Flores

3 Answers

I wrestled a bear once.

noSpoon

Mohammed

Related questions

Recent Activity

Donate For Us