Медиа-запросы Проблемы с большими экранами телефона

0

Кажется, у меня проблемы с моим стилем, когда я проверяю мой стиль на моей галактике Samsung S4, похоже, он применяет те же стили, что и на моем рабочем столе.

Это потому, что разрешение S4 очень велико?

Кажется, я не могу обойти это, поскольку ручной запрос, похоже, не применяется к нему.

Код CSS:

@media screen {
    //Desktop Screens
    * { 
        margin: 0; 
        padding: 0; 
        border: 0; 
    }
    .clear { 
        clear:both; 
    } 

    .right { 
        float: right; 
    } 

    .left { 
        float: left; 
    }
    p.title {
        font-size: 18px;
        font-weight: bold;
    }
    body 
    {
        font: 80% / 1 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
        background: #877781; 
        color: #0c0c0c;
        text-align: center;
    } 
    .login_cont {
        height: 80%;
        width: 15%;
        font: 80% / 1 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
        min-height: 200px;
        margin-top: 5%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        background: #dadada;
        border: 1px solid #0c0c0c;
        box-shadow: 1px 1px 3px #0c0c0c;
        border-radius: 5px;
    }

    .login_cont label{
        margin: 5px;
        padding: 5px;
        margin-top: 10px;
        font: 150% / 1 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
    }
    .login_cont h1 {
        margin: 5px;
        padding: 5px;
        margin-top: 10px;
        font: 250% / 1 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
        font-weight: bold;
    }
    .login_cont input {
        height: 20px;
        width: 50%;
        margin: 10px
    }
    .login_cont input[type='submit'] {
        height: 20px;
        width: 50%;
        margin: 10px;
    }
}
@media screen and (max-width: 480px) {
    //Traditional phones
    .login_cont {
        height: 70%;
        width: 80%; 
    }
    .login_cont input {
        height: 20px;
        width: 1px;
        margin: 10px
    }
    .login_cont input[type='submit'] {
        height: 20px;
        width: 1px;
        margin: 10px;
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px) {
    //Bigger phones
    .login_cont {
        height: 70%;
        width: 80%; 
    }
    .login_cont input {
        height: 20px;
        width: 80%;
        margin: 10px
    }
    .login_cont input[type='submit'] {
        height: 50px;
        width: 70%;
        margin: 10px;
    }
}

Было бы лучше использовать медиа-запросы для включения разных таблиц стилей или же это так же хорошо?

Теги:
dom
media-queries

1 ответ

0

медиа-запросы проверяют ширину экрана в пикселях. поэтому, если макет рабочего стола подходит, он подходит. легкий как это. В чем проблема? Разные на разных сотовых телефонах? Это не проблема. Создание макетов для вашего сайта не означает, что он всегда должен выглядеть точно таким же, это означает, что он должен выглядеть как можно лучше во всех случаях :) [edit] Разрешение S4: Размер 1080 x 1920 пикселей, 5,0 дюйма (~ 441 ppi плотность пикселей). Таким образом, вы должны настроить свойства экрана. Но это определенно становится проблемой с горизонтальным представлением 1920 года.... иначе вы даете настольным зрителям (сколько сейчас есть) сотовый телефон тоже?

Поэтому я думаю, что вы не разрешаете его только с помощью медиазаписей. Я знаю, что существует PHP-класс для распознавания сотовых телефонов. возможно, у кого-то есть лучшее решение.

[/редактировать]

[2nd edit] с помощью этого php-скрипта вы можете распознать все мобильные устройства: http://mobiledetect.net/ [/2nd edit]

  • 0
    Проблема в том, что мне нужно, чтобы div расширялся на мобильных устройствах, а текст был больше. Я хочу другой набор стилей для мобильных устройств.
  • 0
    обновил мой ответ
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню