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, Nov 14 '16 at 20:19
@hungerstar Guessing what you mean is I should remove !important? — Roberto Flores, Nov 14 '16 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, Nov 14 '16 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, Nov 14 '16 at 20:45
Could you try flex layout design https://css-tricks.com/snippets/css/a-guide-to-flexbox/? — maheshiv, Nov 20 '16 at 18:45
@maheshiv Tried that but not really what I was looking for. I will post an update on what I am doing — Roberto Flores, Nov 21 '16 at 20:44
@RobertoFlores I think image is not skew instead it's blurry. will you pelase post both images (I mean original image and iPad screen shot). iPad and iPhone uses retina display means that you need images of twice the size. for example if div size is 200x100 then we have to use image of size 400x200. — Shoaib Konnur, Nov 22 '16 at 09:25
@ShoaibKonnur it is not its blurry. On the desktop and android devices, the images response accordingly. On the Iphone and Ipad, it does not. It appears it displays the full length and the full width of the image — Roberto Flores, Nov 22 '16 at 19:15
When you say on desktop, have you also tested this on Safari on a Mac? My guess is that this is a Safari issue rather than an iOS device specific issue. To scale an image, you really only need to set the max-width to 100% and height to auto and the !important statements will only create more issues. Have you validated your html to make sure all your tags are closed and attributes are missing any quotes. — Derick, Nov 23 '16 at 04:52
@Derick: If it is the safari, how would I target safari with specific styling only — Roberto Flores, Nov 23 '16 at 20:12
you need to use 2X version of images in iPhone and iPad because of high resolution. go through this link http://www.kylejlarson.com/blog/creating-retina-images-for-your-website/ — vijay, Nov 25 '16 at 20:08

I wrestled a bear once. · Answer 1 · 2016-11-23T22:51:57.830

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 '16 at 22:51

answered Nov 14 '16 at 20:21

I wrestled a bear once.

22,983
19
69
116

@I wrestled a bear once: I have tried you approach and it still does not show any results – Roberto Flores Nov 14 '16 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 Nov 15 '16 at 00:19
@RobertoFlores - There is a better regex here: http://stackoverflow.com/questions/12567260/how-to-detect-ios-6-and-all-minor-versions-by-user-agent/12580745#12580745 – I wrestled a bear once. Nov 15 '16 at 02:08
@I wrestled a bear once: I tried that and nothing. Do not understand – Roberto Flores Nov 23 '16 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. Nov 23 '16 at 21:38
@RobertoFlores - I've edited the answer based on known useragents [from here](http://www.webapps-online.com/online-tools/user-agent-strings/dv/operatingsystem51849/ios). – I wrestled a bear once. Nov 23 '16 at 22:09
@I wrestled a bear once: I have tried your approach but it targets all browsers. Is there a way to target only safari? – Roberto Flores Nov 23 '16 at 22:50
@RobertoFlores - For sure. My updated answer targets Sarfari on Apple devices. Does that help? – I wrestled a bear once. Nov 23 '16 at 22:52
@I wrestled a bear once: as for right now, it isnt. I am trying to narrow down where the heck its going wrong – Roberto Flores Nov 23 '16 at 23:27

noSpoon · Answer 2 · 2016-11-22T09:56:42.430

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 '16 at 09:56

answered Nov 22 '16 at 09:32

noSpoon

29
10

I had the ratio thing not part of the code at the beginning and the skewing issue still occurred – Roberto Flores Nov 22 '16 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 Nov 23 '16 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 Nov 24 '16 at 08:29

score 1 · Answer 3 · answered Nov 23 '16 at 02:23

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 '16 at 02:23

Mohammed

352
4
18

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

user3799112 · Answer 4 · 2016-11-24T18:38:01.973

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 '16 at 18:38

answered Nov 23 '16 at 21:00

user3799112

71
12

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 Nov 23 '16 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 Nov 28 '16 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 Nov 28 '16 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 Nov 28 '16 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 Nov 28 '16 at 22:24
If you want I can build you a setup for the slideshow. Just let me know – user3799112 Nov 29 '16 at 07:58
You can connect you device to a mac and with safari developper tools you can use the inspector on you iPad/iPhone. The Point is that you have set so many hight and importants. Do you still have the original downloaded template you are using? – user3799112 Nov 29 '16 at 08:02

Liron Elimeleh · Answer 5 · 2016-11-25T18:32:06.293

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 '16 at 18:32

answered Nov 25 '16 at 17:55

Liron Elimeleh

41
6

CSS Styling that only styles all IPhones and IPADS

5 Answers5