gpt4 book ai didi

html - Bootstrap Media queries Orientation Change to Landscape 在物理设备下不起作用

转载 作者:搜寻专家 更新时间:2023-10-31 08:43:24 25 4
gpt4 key购买 nike

我在 Bootstrap 中面临一个非常奇怪的问题,基本上我有这个页面 http://excellencewebworks.com/bootstrap/video_skin.html

我在这里添加了覆盖有平板电脑视频皮肤的视频。当我在 Mozilla Firefox -> Tools-> Responsive Design View for 360 x 640 dimension 响应模式下检查页面时,它在纵向和横向模式下运行良好。

但是当在物理设备上检查同一个页面时,它只适用于纵向而不是横向,设计在横向模式下会发生变化。看到这个很奇怪。

任何人都可以调查一下并让我知道我在这里做错了什么吗?

谢谢,罗纳克沙阿

最佳答案

这是横向和纵向模式媒体查询的代码,试试这个。

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}

/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}

/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {

}

/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

}

关于html - Bootstrap Media queries Orientation Change to Landscape 在物理设备下不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32817666/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com