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:

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 think if you throw a few more !important in there it will fix your problem. — hungerstar, Commented Nov 14, 2016 at 20:19
@hungerstar Guessing what you mean is I should remove !important? — Roberto Flores, Commented Nov 14, 2016 at 20:21
@hungerstar: okay. But why would it only occur in IPHONES and IPADS. But for other devices and desktops, it is working fine? I have reviewed the css and there was things affecting the image but they have been removed and yet it still appearing — Roberto Flores, Commented Nov 14, 2016 at 20:25
I am using MURA's cms and I modified it so the slider images are resonsive. It works fine for desktop and andriod devices but not for the iphones or ipads — Roberto Flores, Commented Nov 14, 2016 at 20:45

I wrestled a bear once. · Accepted Answer · 2016-11-23 22:51:57Z

8

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.

edited Nov 23, 2016 at 22:51

answered Nov 14, 2016 at 20:21

I wrestled a bear once.

23.4k20 gold badges72 silver badges120 bronze badges

@I wrestled a bear once: I have tried you approach and it still does not show any results
– Roberto Flores
Commented Nov 14, 2016 at 20:36
@I wreslted a bear once.: I was able to make it work for the Ipad but not for the iphone, I just copied what you did
– Roberto Flores
Commented Nov 15, 2016 at 0:19
@RobertoFlores - There is a better regex here: stackoverflow.com/questions/12567260/…
– I wrestled a bear once.
Commented Nov 15, 2016 at 2:08
@I wrestled a bear once: I tried that and nothing. Do not understand
– Roberto Flores
Commented Nov 23, 2016 at 20:11
@RobertoFlores can you alert the useragent (alert(navigator.userAgent);)? if we know that then we know what to check for in the code.
– I wrestled a bear once.
Commented Nov 23, 2016 at 21:38

| Show 4 more comments

noSpoon · Accepted Answer · 2016-11-22 09:56:42Z

1

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!

edited Nov 22, 2016 at 9:56

answered Nov 22, 2016 at 9:32

noSpoon

2910 bronze badges

I had the ratio thing not part of the code at the beginning and the skewing issue still occurred
– Roberto Flores
Commented Nov 22, 2016 at 19:12
@ noSpoon: I have use that site before and followed their instructions but it still keeps skewing and not responding occurdinaly
– Roberto Flores
Commented Nov 23, 2016 at 17:31
Please, create a js fiddle with the scenario that you described and send it here, so me and my colleague can review it.
– noSpoon
Commented Nov 24, 2016 at 8:29

Add a comment |

Mohammed · Accepted Answer · 2016-11-23 02:23:56Z

1

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

answered Nov 23, 2016 at 2:23

Mohammed

3524 silver badges18 bronze badges

I have tried that but it does not seem to function correctly still
– Roberto Flores
Commented Nov 23, 2016 at 17:30

Add a comment |

user3799112 · Accepted Answer · 2016-11-24 18:38:01Z

1

Had a look at your website. I think you have to look at your javascript errors first.

Try to change meta viewport to:

    <meta name="viewport" content="width=device-width, initial-scale=1">

Jquery is not initializing right. So check that out.

On line 860 of your index add a slash before ending.

    <link rel="stylesheet" href="..." />

and not

    <link rel="stylesheet" href="..." >

Than add that stylesheet to your server. It's not in there and it's called iPhone or something. When this stylesheet kicks in, it might solve your troubles. Same on line 865. It does not find you bootstrap js.

I can tell you that on safari desktop you have the same troubles with the image.

Let me know if that fixes anything.

edited Nov 24, 2016 at 18:38

answered Nov 23, 2016 at 21:00

user3799112

7112 bronze badges

www.regalmed.com: If you have an android device, it will look fine. However, if you have an iphone or a ipad, the carousel image blows up but not the other images below it and I do not understand why
– Roberto Flores
Commented Nov 23, 2016 at 21:10
I tried your approach user3799112 but it did not work. I tried recreating the files and now it works for the iphone but it does not work on the s7 on portrait mode. Ugh
– Roberto Flores
Commented Nov 28, 2016 at 19:50
Well, actually. I don't know the viewport for the s7. Probably your stylesheet does not cover the viewport. But a good idea might be to change px into em. Since you will have the same problem every time a new phone is coming. Viewports keep changing. you can google px vs em. There is so much code going on in that slideshow, it blows my mind a bit. I would start to build a container with only one image and no js attached. Make it act like you wish, than add js later to make it a slideshow. You know how to do that on your own?
– user3799112
Commented Nov 28, 2016 at 21:53
I see and no but I can look into it. It appears to be working fin on landscape mode but not in portrait mode. Is there a way on the desktop to render the same results or a emulator that can replicate what I am seeing on my S7
– Roberto Flores
Commented Nov 28, 2016 at 22:00
Not only that, it was working fine before I updated the styling sheet and by update, just retype what I did before and adding particular css styling
– Roberto Flores
Commented Nov 28, 2016 at 22:24

| Show 2 more comments

Liron Elimeleh · Accepted Answer · 2016-11-25 18:32:06Z

1

I Saw your problem with iphone and the image is still skewing, so I think you should try to add this lines to your customized css, that will help you with all devices .

try to add css that overide the height with this

.carousel-inner {
height: auto;
}

or

.carousel-inner > .item > img {
height: auto;
}

hope it will solve your problem.

edited Nov 25, 2016 at 18:32

answered Nov 25, 2016 at 17:55

Liron Elimeleh

416 bronze badges

Add a comment |

Collectives™ on Stack Overflow

CSS Styling that only styles all IPhones and IPADS

5 Answers 5

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
css
iphone
ipad
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Not the answer you're looking for? Browse other questions tagged javascriptjquerycssiphoneipad or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
css
iphone
ipad
or ask your own question.