当我为iPhone 6 plus设置媒体查询时,为了横向显示,它渲染得很好,但它会扰乱iPhone 4S的控件布局。我怎么能避免这种情况?我知道这是因为我已经设置了覆盖bootstrap的.well,但是如果我不设置它,控件中会有很多不需要的空间。
这是我的css代码:
/ iPhone 4和4S风景 /
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
h1, .h1{
font-size:26px;
}
.well{
padding: 59px;
}
}
/ 风景中的iPhone 6 Plus /
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
.mt-4x{
margin-top:20px !important;
}
.well{
padding: 175px;
}
}
答案 0 :(得分:0)
您是否已将此添加到您的iPhone的css媒体查询中?
/* iPhone 6 in portrait & landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
}
/* iPhone 6 in landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
}
/* iPhone 6 in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
}
/* iPhone 6 Plus in portrait & landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
}
/* iPhone 6 Plus in landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
}
/* iPhone 6 Plus in portrait */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
/* iPhone 5 & 5S in portrait & landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
}
/* iPhone 5 & 5S in landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
}
/* iPhone 5 & 5S in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/*
iPhone 2G, 3G, 4, 4S Media Queries
It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
*/
/* iPhone 2G-4S in portrait & landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* iPhone 2G-4S in landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
}
/* iPhone 2G-4S in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
}