CSS样式，只设计所有的iphone和ipad

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

问题:除了iphone，我有一个能在所有平台上响应的图像。

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

在Android版本的网站上，以下图片并没有倾斜:

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

在iphone版本的网站上，它正在放大图片，我不确定。

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

我认为接下来的问题会解决这个问题，除了iphone和ipad。

#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:

话虽如此，我也张贴了我所做的其他css，以使它对不同大小的响应:

/***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.

我使用了以下网站来定位iphone和ipad，但它对iphone或ipad没有影响:http://stephen.io/mediaqueries/。图像继续倾斜。

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?

有没有一种方法可以检测网站何时在iphone和ipad上显示。一旦它检测到它，就调用另一个只针对iphone和ipad的css文件?

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:

我找到了一行代码，可以检测iphone上的its，但不知道如何为iphone和ipad修改它。我做了如下的操作，但它似乎没有检测到iphone或ipad是否被检测到:

        <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:

我使用以下工具来检测用户是在使用ipad还是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:

它确实检测到了iphone和ipad。但是，我正在做的样式没有被检测到。以下是我为iphone和ipad设计的旋转木马的样式:

#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.

如您所见，它没有检测到媒体查询，但IPAD和IPHONE正在识别它，因为警报响了。

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

现在，我只想让iphone和ipad看起来好看一点。我已经研究这个问题有一段时间了，没有任何解决办法或进展

5 个解决方案

#1

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

您的想法是正确的，您只需将链接标记插入到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.

我在这里使用insertneighbor enthtml将它放在页面的中。

#2

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.

你的代码看起来很好，除了比率的问题。试着删除(-webkit-min-device-pixel-ratio: 2)和(-webkit-max-device-pixel-ratio:0)。如果比率不正确，您无法看到代码的效果，因此请尝试不使用它。

Cheers!

干杯!

#3

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.

我的建议是使用vw和vh而不是100%因为这压缩了整个屏幕的尺寸而不是div或者它的父标签。

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

您可以在这里阅读更多相关信息:http://www.w3schools.com/cssref/css_units.asp

#4

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

看看你的网站。我认为您必须首先查看您的javascript错误。

Try to change meta viewport to:

尝试将meta viewport更改为:

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

Jquery is not initializing right. So check that out.

Jquery没有正确初始化。所以检查出来。

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

在索引的第860行，结束前加一个斜线。

    <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.

而不是将样式表添加到服务器。它不在里面，叫做iPhone什么的。当这个样式表启动时，它可能会解决您的问题。同样的第865行。它没有找到你的引导js。

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

我可以告诉你，在safari桌面，你对图像也有同样的问题。

Let me know if that fixes anything.

如果这能解决任何问题，请告诉我。

#5

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 .

我看到你的iphone有问题，图像还是偏了，所以我认为你应该尝试在你的定制css中添加这几行，这样可以帮助你处理所有的设备。

try to add css that overide the height with this

尝试添加css，覆盖这个高度

.carousel-inner {
height: auto;
}

or

或

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

hope it will solve your problem.

希望它能解决你的问题。