У меня есть веб-страница jQuery Mobile, которая в настоящее время имеет width=device-width, но мои элементы формы (текстовые поля и кнопка отправки) растягиваются до ширины браузера при просмотре на настольном компьютере.
Есть ли способ установить максимальную ширину, чтобы эти элементы (или весь контент div) отображались правильно на мобильных устройствах, но не превышали фиксированную максимальную ширину при просмотре на настольных компьютерах?
<style type='text/css'>
<!--
html { background-color: #333; }
@media only screen and (min-width: 600px){
.ui-page {
width: 600px !important;
margin: 0 auto !important;
position: relative !important;
border-right: 5px #666 outset !important;
border-left: 5px #666 outset !important;
}
}
-->
</style>
@media only screen and (min-width: 600px) ограничивает правило CSS для настольных устройств с минимальной шириной окна 600 пикселей. Для них width контейнера страниц, созданного jQuery Mobile, фиксируется на 600 пикселей, margin: 0 auto центрирует страницу. Остальное улучшает результат эстетически.
Тем не менее, это один из недостатков: это не очень хорошо работает с скользящей анимацией. Я предлагаю отключить анимацию (возможно, также в зависимости от типа носителя и размера экрана с помощью @media), потому что в любом случае это выглядит просто странно на большом экране.
@media only screen and (min-width: 800px){
body {
background:transparent !important;
overflow:hidden !important;
}
html {
background: #fff;
background-attachment: fixed;
overflow:hidden !important;
}
.ui-page {
width: 340px !important;
border:60px solid #111 !important;
margin: 50px auto !important;
position: relative !important;
border-right: 20px #222 outset !important;
border-left: 20px #000 outset !important;
border-radius:25px;
-webkit-border-radius:25px;
-moz-border-radius:25px;
overflow-y:scroll !important;
min-height:600px !important;
height:600px !important;
max-height:600px !important;
padding-bottom:0px;
}
}
.ui-page {
max-width: 320px !important;/*or 640 */
margin: 0 auto !important;
position: relative !important;
}
Дизайн и тест для 320 px или 640 px. в случае 640 px на рабочем столе (большее разрешение) он займет ширину 640 пикселей, а на мобильном телефоне будет ширина мобильного телефона.
предоставить границу при необходимости
.ui-page {
border-right: 2px #000 outset !important;
border-left: 2px #000 outset !important;
}
Вы можете использовать document.getElementById("id").style.width="200px";