媒体查询 - 目标 iPhone 6/ 6 Plus 没有更老的 iPhones
Media Queries - Target iPhone 6/ 6 Plus without older iPhones
我可以使用媒体查询定位 iPhone 6/ 6 Plus。
/* iPhone 6 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {}
/* iPhone 6 Plus */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {}
问题:
它针对所有其他 iPhones(iPhone 6 样式 - 旧 iPhones 的横向超过 375 像素)。
有什么办法解决这个问题还是我必须使用 JavaScript?
我还想定位其他手机,例如 Samsung Galaxy S4 (360px)。
干杯。
我想这个问题没有 CSS3 解决方案?
大多数媒体查询都会发生冲突。
我决定用 JavaScript 方法回答我自己的问题。我希望它有所帮助。
这将涵盖大多数场景。然后,您可以为每个添加的 class 添加不同的样式。
基本都是纵向的宽度检测,横向的高度检测。很简单。
var $banner = $('#banner'),
h = window.innerHeight,
w = window.innerWidth;
if (w === 320 || h === 320) {
//iPhone 5 or below
$banner.addClass('iPhone');
} else if (w === 375 || h === 375) {
//iPhone 6
$banner.addClass('iPhone6');
} else if (w === 414 || h === 414) {
//iPhone 6 Plus
$banner.addClass('iPhone6Plus');
} else if (w === 346 || h === 346) {
//Smart phone e.g. Q10
$banner.addClass('smartPhoneSmall');
} else if (w === 360 || h === 360) {
//Smart phone e.g. Samsung Galaxy S3/ S4
$banner.addClass('smartPhoneMed');
} else if (w === 384 || h === 384) {
//Smart phone e.g. LG Nexus 4
$banner.addClass('smartPhoneBig');
} else if (w === 400 || h === 400) {
//Smart phone e.g. Samsung Galaxy Note
$banner.addClass('smartPhoneLarge');
}
Phone CSS宽度参考:http://mydevice.io/devices/
编辑:我忘了嵌套所以你可以用 CSS3
/* Portrait Styles */
@media only screen and (orientation : portrait) {
@media only screen and (min-device-width: 346px) and (max-device-width: 359px) {
/* Small Smartphones e.g. Q10 */
.banner {
height: 129px;
width: 346px;
}
}
@media only screen and (min-device-width: 360px) and (max-device-width: 374px) {
/* Medium Smartphones e.g. Samsung Galaxy S3/ S4 */
.banner {
height: 135px;
width: 360px;
}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 383px) {
/* iPhone 6 */
.banner {
height: 140px;
width: 375px;
}
}
@media only screen and (min-device-width: 384px) and (max-device-width: 399px) {
/* Big Smartphones e.g. LG Nexus 4 */
.banner {
height: 144px;
width: 384px;
}
}
@media only screen and (min-device-width: 400px) and (max-device-width: 413px) {
/* Large Smartphones e.g. Samsung Galaxy Note */
.banner {
height: 150px;
width: 400px;
}
}
@media only screen and (min-device-width: 414px) {
/* iPhone 6 Plus */
.banner {
height: 155px;
width: 414px;
}
}
}
/* Landscape Styles */
@media only screen and (orientation: landscape) {
@media only screen and (min-device-height: 346px) and (max-device-height: 359px) {
/* Small Smartphones e.g. Q10 */
.banner {
height: 129px;
width: 346px;
}
}
@media only screen and (min-device-height: 360px) and (max-device-height: 374px) {
/* Medium Smartphones e.g. Samsung Galaxy S3/ S4 */
.banner {
height: 135px;
width: 360px;
}
}
@media only screen and (min-device-height: 375px) and (max-device-height: 383px) {
/* iPhone 6 */
.banner {
height: 140px;
width: 375px;
}
}
@media only screen and (min-device-height: 384px) and (max-device-height: 399px) {
/* Big Smartphones e.g. LG Nexus 4 */
.banner {
height: 144px;
width: 384px;
}
}
@media only screen and (min-device-height: 400px) and (max-device-height: 413px) {
/* Large Smartphones e.g. Samsung Galaxy Note */
.banner {
height: 150px;
width: 400px;
}
}
@media only screen and (min-device-height: 414px) {
/* iPhone 6 Plus */
.banner {
height: 155px;
width: 414px;
}
}
}
我可以使用媒体查询定位 iPhone 6/ 6 Plus。
/* iPhone 6 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {}
/* iPhone 6 Plus */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {}
问题:
它针对所有其他 iPhones(iPhone 6 样式 - 旧 iPhones 的横向超过 375 像素)。
有什么办法解决这个问题还是我必须使用 JavaScript?
我还想定位其他手机,例如 Samsung Galaxy S4 (360px)。
干杯。
我想这个问题没有 CSS3 解决方案?
大多数媒体查询都会发生冲突。
我决定用 JavaScript 方法回答我自己的问题。我希望它有所帮助。
这将涵盖大多数场景。然后,您可以为每个添加的 class 添加不同的样式。
基本都是纵向的宽度检测,横向的高度检测。很简单。
var $banner = $('#banner'),
h = window.innerHeight,
w = window.innerWidth;
if (w === 320 || h === 320) {
//iPhone 5 or below
$banner.addClass('iPhone');
} else if (w === 375 || h === 375) {
//iPhone 6
$banner.addClass('iPhone6');
} else if (w === 414 || h === 414) {
//iPhone 6 Plus
$banner.addClass('iPhone6Plus');
} else if (w === 346 || h === 346) {
//Smart phone e.g. Q10
$banner.addClass('smartPhoneSmall');
} else if (w === 360 || h === 360) {
//Smart phone e.g. Samsung Galaxy S3/ S4
$banner.addClass('smartPhoneMed');
} else if (w === 384 || h === 384) {
//Smart phone e.g. LG Nexus 4
$banner.addClass('smartPhoneBig');
} else if (w === 400 || h === 400) {
//Smart phone e.g. Samsung Galaxy Note
$banner.addClass('smartPhoneLarge');
}
Phone CSS宽度参考:http://mydevice.io/devices/
编辑:我忘了嵌套所以你可以用 CSS3
/* Portrait Styles */
@media only screen and (orientation : portrait) {
@media only screen and (min-device-width: 346px) and (max-device-width: 359px) {
/* Small Smartphones e.g. Q10 */
.banner {
height: 129px;
width: 346px;
}
}
@media only screen and (min-device-width: 360px) and (max-device-width: 374px) {
/* Medium Smartphones e.g. Samsung Galaxy S3/ S4 */
.banner {
height: 135px;
width: 360px;
}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 383px) {
/* iPhone 6 */
.banner {
height: 140px;
width: 375px;
}
}
@media only screen and (min-device-width: 384px) and (max-device-width: 399px) {
/* Big Smartphones e.g. LG Nexus 4 */
.banner {
height: 144px;
width: 384px;
}
}
@media only screen and (min-device-width: 400px) and (max-device-width: 413px) {
/* Large Smartphones e.g. Samsung Galaxy Note */
.banner {
height: 150px;
width: 400px;
}
}
@media only screen and (min-device-width: 414px) {
/* iPhone 6 Plus */
.banner {
height: 155px;
width: 414px;
}
}
}
/* Landscape Styles */
@media only screen and (orientation: landscape) {
@media only screen and (min-device-height: 346px) and (max-device-height: 359px) {
/* Small Smartphones e.g. Q10 */
.banner {
height: 129px;
width: 346px;
}
}
@media only screen and (min-device-height: 360px) and (max-device-height: 374px) {
/* Medium Smartphones e.g. Samsung Galaxy S3/ S4 */
.banner {
height: 135px;
width: 360px;
}
}
@media only screen and (min-device-height: 375px) and (max-device-height: 383px) {
/* iPhone 6 */
.banner {
height: 140px;
width: 375px;
}
}
@media only screen and (min-device-height: 384px) and (max-device-height: 399px) {
/* Big Smartphones e.g. LG Nexus 4 */
.banner {
height: 144px;
width: 384px;
}
}
@media only screen and (min-device-height: 400px) and (max-device-height: 413px) {
/* Large Smartphones e.g. Samsung Galaxy Note */
.banner {
height: 150px;
width: 400px;
}
}
@media only screen and (min-device-height: 414px) {
/* iPhone 6 Plus */
.banner {
height: 155px;
width: 414px;
}
}
}