问题:我的图像在除iphone之外的所有平台都有响应。
在网站的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;
}
}

我使用以下网站来定位IPhones和IPads,但它对iphone或ipads没有影响:http://stephen.io/mediaqueries/。图像继续倾斜。
有没有办法检测网站何时在iphone和ipad上显示。一旦检测到它,再调用另一个仅用于iphone和ipads的css文件?
我能够找到一行代码来检测它是否在iphone上,但不知道如何为iphone和ipads修改它。我做了以下但是它似乎没有检测到是否正在检测到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上看起来很漂亮。我已经做了一段时间没有解决方案或取得进展
答案 0 :(得分:5)
答案 1 :(得分:1)
除了ratio
之外,你的代码似乎都很好。
请尝试删除(-webkit-min-device-pixel-ratio: 2)
和(-webkit-max-device-pixel-ratio:0)
。如果比率不正确,则无法查看代码的效果,请尝试不使用它。
干杯!
答案 2 :(得分:1)
我建议的一件事是使用vw和vh而不是100%,因为这样可以调整屏幕的整个大小而不是div或者是它的父标记。
您可以在此处详细了解: http://www.w3schools.com/cssref/css_units.asp
答案 3 :(得分:1)
看看你的网站。我想你必须先看看你的javascript错误。
尝试将元视口更改为:
<meta name="viewport" content="width=device-width, initial-scale=1">
Jquery没有正确初始化。所以检查一下。
在索引的第860行,在结束前添加斜杠。
<link rel="stylesheet" href="..." />
而不是
<link rel="stylesheet" href="..." >
将该样式表添加到您的服务器。它不在那里,它被称为iPhone或其他东西。 当这个样式表开始时,它可能会解决你的麻烦。 在865行也是如此。它找不到你的引导程序。
我可以告诉你,在safari桌面上你会遇到与图像相同的麻烦。
如果能解决问题,请告诉我。
答案 4 :(得分:1)
我用iphone看到你的问题而且图像仍在倾斜, 所以我认为你应该尝试将这些行添加到你的自定义CSS中, 这将有助于您使用所有设备。
尝试使用此
添加超出高度的css.carousel-inner {
height: auto;
}
或
.carousel-inner > .item > img {
height: auto;
}
希望它能解决你的问题。