Установка максимальной ширины для контента в jQuery Mobile? - PullRequest
Новая
       24

Установка максимальной ширины для контента в jQuery Mobile?

18 голосов
/ 29 октября 2011

У меня есть веб-страница jQuery Mobile, которая в настоящее время имеет width=device-width, но мои элементы формы (текстовые поля и кнопка отправки) растягиваются до ширины браузера при просмотре на настольном компьютере.

Есть лиспособ установить максимальную ширину, чтобы эти элементы (или весь div контента) правильно отображались на мобильных устройствах, но не превышали фиксированную максимальную ширину при просмотре на настольных компьютерах?

Ответы [ 4 ]

43 голосов
/ 02 января 2012 
    <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, устанавливается на 600px, margin: 0 auto центрирует страницу. Остальное улучшает результат эстетически.

Однако есть один недостаток: это не очень хорошо работает с анимацией скольжения. Я предлагаю отключить анимацию (возможно, также в зависимости от типа носителя и размера экрана, используя @media), потому что она все равно выглядит странно на большом экране.

3 голосов
/ 06 октября 2013 
@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;
        }

    }
0 голосов
/ 24 мая 2017 
.ui-page {
    max-width: 320px !important;/*or 640 */
    margin: 0 auto !important;
    position: relative !important;
}

Дизайн и тестирование для 320 пикселей или 640 пикселей. в случае 640 пикселей на рабочем столе (большее разрешение) он будет иметь ширину 640 пикселей, а на мобильном телефоне - ширину мобильного.

при необходимости укажите границу 

.ui-page {
    border-right: 2px #000 outset !important;
    border-left: 2px #000 outset !important;
}
0 голосов
/ 01 ноября 2011

Вы можете использовать document.getElementById("id").style.width="200px";

jsFiddle Пример

...