Bootstrap медиазапросы Изменить ориентацию на альбомный не работают под физическим устройством

Question

Я столкнулся один очень странный вопрос в загрузчике, в основном у меня есть эта страница http://excellencewebworks.com/bootstrap/video_skin.html

Здесь я добавляю видео покрытого таблетки видео кожи. Когда я проверяю страницу в режиме реагирования в Mozilla Firefox -> Tools-> Responsive Design View for 360 x 640 dimension, она работает хорошо в портретном и ландшафтном режимах.

Но при проверке одной и той же страницы на физическом устройстве она работает только в портретном, а не в ландшафтном дизайне, дизайн изменяется в ландшафтном режиме. Странно это видеть.

Может ли кто-нибудь заглянуть в это и сообщить мне, что я здесь делаю неправильно?

Спасибо, Ronak Шах

Answer 1

Вот код пейзаж и портрет режиме медиазапросы попробовать это.

/* ----------- 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) { 

} 

Answer 2

Хорошо, дайте ему попробовать что-то вроде этого:

@media screen and (min-width:360px) and (max-width:640px){ 
    /*-----style----*/ 
} 

сделать также, что ваши медиа-запросы не дублируют друг друга.