科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - CSS Styling that only styles all IPhones and IPADS - Stack Overflow

    javascript - CSS Styling that only styles all IPhones and IPADS - Stack Overflow

    programmeradmin1浏览0评论

    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;
	} 
}

    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

    • javascript
    • jquery
    • css
    • iphone
    • ipad
    Share Improve this question edited Nov 23, 2016 at 20:40 CommunityBot 11 silver badge asked Nov 14, 2016 at 20:16 Roberto FloresRoberto Flores 7892 gold badges16 silver badges49 bronze badges 12
    • 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
    • Are you using your own carousel/slider? Or someone else's? – hungerstar Commented Nov 14, 2016 at 20:43
    • 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
     |  Show 7 more comments

    5 Answers 5

    Reset to default 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.

    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!

    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

    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.

    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.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论