仅设置所有 iPhone 和 IPADS 样式的 CSS 样式答案

【问题标题】：CSS Styling that only styles all IPhones and IPADS仅设置所有 iPhone 和 IPADS 样式的 CSS 样式
【发布时间】：2016-11-14 20:16:28
【问题描述】：

问题：我的图像在除 iphone 之外的所有平台上都能响应。

在网站的 Android 版本上，以下图像没有倾斜：

在 iphone 版本的网站上，它正在炸毁图像，我不确定。

我认为以下方法可以解决除了 IPHONES 和 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%; 
}

话虽如此，我还发布了我所做的其余 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;
	} 
}

我已使用以下站点针对 iPhone 和 iPad，但它对 iphone 或 iPad 没有影响：http://stephen.io/mediaqueries/。图像继续倾斜。

有没有办法检测网站何时显示在 iphone 和 ipad 上。一旦检测到，调用另一个仅适用于 iphone 和 ipad 的 css 文件？

我能够找到一行代码来检测它是否在 iphone 上，但不确定如何为 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>

任何帮助将不胜感激。

谢谢

更新

我使用以下方法来检测用户使用的是 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>

它确实检测到了 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;
    }
}

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

任何帮助将不胜感激。

更新：

此时，我只想在 iphone 和 ipad 上看起来不错。我已经为此工作了一段时间，但没有任何解决方案或进展

【问题讨论】：

我想如果你在里面再扔几个!important 就会解决你的问题。
@hungerstar 猜你的意思是我应该删除 !important？
@hungerstar：好的。但是为什么它只会出现在 IPHONES 和 IPADS 中。但是对于其他设备和台式机，它工作正常吗？我已经查看了 css，并且有些东西影响了图像，但它们已被删除，但它仍然出现
您在使用自己的旋转木马/滑块吗？还是别人的？
我正在使用 MURA 的 cms，我对其进行了修改，以使滑块图像具有共鸣性。它适用于台式机和安卓设备，但不适用于 iphone 或 ipad

标签： javascript jquery css iphone ipad

【解决方案1】：

你的想法是对的，你只需要在 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">');
}

我这里用insertAdjacentHTML放在页面的<head>里。

【讨论】：

@我和一只熊搏斗过一次：我试过你的方法，它仍然没有任何结果
@I wreslted a bear once.: 我可以让它在 Ipad 上工作，但在 iphone 上不行，我只是复制了你所做的
@RobertoFlores - 这里有一个更好的正则表达式：stackoverflow.com/questions/12567260/…
@我曾经和一只熊搏斗过：我试过了，但没有。不明白
@RobertoFlores 你能提醒用户代理（alert(navigator.userAgent);）吗？如果我们知道，那么我们就知道在代码中检查什么。

【解决方案2】：

除了ratio 之外，您的代码似乎一切正常。尝试删除(-webkit-min-device-pixel-ratio: 2) 和(-webkit-max-device-pixel-ratio:0)。如果比率不正确，您将看不到代码的效果，因此请尝试不使用它。

干杯！

【讨论】：

我一开始的代码中没有比率的东西，但仍然出现倾斜问题
@noSpoon：我之前使用过该网站并按照他们的说明进行操作，但它仍然保持倾斜并且没有响应发生
请用您描述的场景创建一个 js fiddle 并将其发送到这里，以便我和我的同事可以查看它。

【解决方案3】：

我建议的一件事是使用 vw 和 vh 而不是 100%，因为这样可以确保屏幕的整个大小而不是 div 或它的父标签。

您可以在此处阅读更多信息： http://www.w3schools.com/cssref/css_units.asp

【讨论】：

我已经尝试过了，但它似乎仍然无法正常工作

【解决方案4】：

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

尝试将元视口更改为：

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

Jquery 没有正确初始化。所以检查一下。

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

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

而不是

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

然后将该样式表添加到您的服务器。它不在里面，它被称为 iPhone 什么的。当这个样式表启动时，它可能会解决你的麻烦。第 865 行相同。它没有找到您引导 js。

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

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

【讨论】：

www.regalmed.com：如果您有安卓设备，它看起来会很好。但是，如果您使用的是 iphone 或 ipad，则轮播图像会爆炸，但其下方的其他图像不会爆炸，我不明白为什么
我尝试了你的方法 user3799112 但没有奏效。我尝试重新创建文件，现在它适用于 iphone，但它不适用于纵向模式的 s7。呃
嗯，实际上。我不知道 s7 的视口。可能您的样式表没有覆盖视口。但一个好主意可能是将 px 更改为 em。因为每次新手机到来时你都会遇到同样的问题。视口不断变化。你可以谷歌 px vs em。幻灯片中有很多代码，这让我有点震惊。我将开始构建一个只有一个图像且没有附加 js 的容器。让它按照你的意愿行事，而不是稍后添加 js 使其成为幻灯片。你知道如何自己做吗？
我看到了，但我可以调查一下。它似乎在横向模式下工作正常，但在纵向模式下却不行。有没有办法在桌面上呈现相同的结果，或者有一个模拟器可以复制我在 S7 上看到的内容
不仅如此，在我更新样式表之前它工作正常，通过更新，只需重新输入我之前所做的并添加特定的 css 样式

【解决方案5】：

我看到你的 iphone 问题，图像仍然歪斜，所以我认为您应该尝试将此行添加到您的自定义 css 中，这将帮助您使用所有设备。

尝试添加覆盖高度的css

.carousel-inner {
height: auto;
}

或

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

希望它能解决你的问题。

【讨论】：