Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
38 / 38 / 26
Регистрация: 11.01.2014
Сообщений: 343
1

Как заставить работать @media, или что такое (min-device-width)

25.01.2015, 23:52. Просмотров 1372. Ответов 10
Метки нет (Все метки)

сверстал небольшую адаптацию ... в надежде что она поможет адаптировать менюшку в мобилках и прочих порт. устройствах.
Но вот беда, на мобилках будто тега media вообще нету, да и хром на эмуляторе тож самое показывает ...
с начало я думал что все просто, есть у нас телефон с маленьким экраном, значит и media запрос над делать соответствующий, но не - не пашет.
Потом я вспомнил про то как кто-то где-то писал "min-device-width" - не помогло, можно ли дать адаптацию верстке не используя js ?
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.menu .button{visibility: none;}
.menu ul{
    color: #f00;
    margin: 0 auto;
    width:  36%;}
.menu ul li {float: left; 
        list-style:  none;
        padding: 0px 10px}
 
@media only screen and (max-width: 769px) {
 
    .menu ul, .menu ul li {overflow: auto;
        width: 100%;
        background-color: #000;
        padding:0;
        margin: 0;}
    .menu ul {display: none; 
        padding:10px 0px;}
    .menu ul li ,.cls{clear: both;}
    .menu .button {width: 50px;
        height: 50px;
        background: #000;
        display: inline-block;
        float: right;
        position: relative;}
    .menu .button:after{content: "menu";
        color: #fff;
        position: absolute;
        top: 14px;
        left: 7px;}
    .menu a {display: block;
        margin-left: 10px;}
    .menu .button:hover ~  ul {display: block;}
    .menu ul:hover ,.menu ul li:hover{display: block;}
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 
 </head>
 <body>
<div class="menu">
    <div class="button">  </div>
 
        <ul>
            <li><a href="#">еллемент1</a></li>
            <li><a href="#">еллемент2</a></li>
            <li><a href="#">еллемент3</a></li>
            <li class="cls"></li>
        </ul>
  
</div>
 
     
 </body>
 </html>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.01.2015, 23:52
Ответы с готовыми решениями:

Заставить работать min-width,max-width в %
&lt;table&gt; &lt;td class=&quot;left&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td class=&quot;middle&quot;&gt;&amp;nbsp;&lt;/td&gt; ...

Min-width или media query в mozilla
Люди, выручайте. Всю голову поломал. Не знаю куда копать. Ситуация такая. Есть сайт. У него всего 1...

Медиазапросы min-width и min-device-width
Подскажите, почему: @media only screen and (max-width : 1170px), only screen and...

Адаптивная вёрстка, min-width или max-width?
В bootstrap 3 применяется сетка на основе media queries, а именно @media (min-width), НО!!!!!! ...

10
Эксперт HTML/CSS
648 / 552 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
27.01.2015, 16:02 2
Лучший ответ Сообщение было отмечено Al_lord как решение

Решение

Может проблема в том, что ты не подключил таблицу стилей в своем html документе?
Цитата Сообщение от Al_lord Посмотреть сообщение
<head>
* * *<meta charset="UTF-8">
* * *<title>Document</title>
</head>
0
38 / 38 / 26
Регистрация: 11.01.2014
Сообщений: 343
28.01.2015, 00:23  [ТС] 3
нет я пользовался тегом style но вы были не далеки от истины, я забыл прописать max-device-width xD вернее я его писал, но как дополнительное условие к max-width. ... короче пришлось скопировать код в другом теге
0
Эксперт по компьютерным сетямЭксперт NIX
11798 / 6762 / 643
Регистрация: 09.09.2009
Сообщений: 26,698
28.01.2015, 00:45 4
Цитата Сообщение от Al_lord Посмотреть сообщение
на мобилках будто тега media вообще нету
многие мобилки "обманывают" - их браузеры отвечают, что у них экраны якобы имеют больший размер, чем реальный физический.
0
38 / 38 / 26
Регистрация: 11.01.2014
Сообщений: 343
28.01.2015, 11:02  [ТС] 5
Цитата Сообщение от Dmitry Посмотреть сообщение
многие мобилки "обманывают" - их браузеры отвечают, что у них экраны якобы имеют больший размер, чем реальный физический.
наверно по этому min-width - не отрабатывает корректно
0
Эксперт по компьютерным сетямЭксперт NIX
11798 / 6762 / 643
Регистрация: 09.09.2009
Сообщений: 26,698
28.01.2015, 15:13 6
вы можете тем же яваскрипт проверить, какую ширину и высоту экрана выдает браузер на мобилке.

чтоб выдавало правду, я добавлял в хедер страницы вот такое:
HTML5
1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
0
Эксперт HTML/CSS
648 / 552 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
28.01.2015, 16:34 7
Цитата Сообщение от Dmitry Посмотреть сообщение
чтоб выдавало правду, я добавлял в хедер страницы вот такое:
Код HTML5
1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
Мобильный браузер пытается сжать страницу под размер своего экрна. С помощью этой строки вы говорите браузеру "установи ширину страницы равной ширине экрана, начальный масштаб = 100%, максимальный масштаб=100%, позволить пользователю изменить масштаб = нет". Вообще, не стоит запрещать масштабирование пользователем. Лучше написать <meta name="viewport" content="width=device-width, initial-scale=1>
0
9 / 9 / 5
Регистрация: 14.01.2015
Сообщений: 173
28.01.2015, 17:06 8
Цитата Сообщение от Dmitry Посмотреть сообщение
чтоб выдавало правду, я добавлял в хедер страницы вот такое:
лучше использовать
HTML5
1
<meta name="viewport" content="width=device-width, initial-scale=1">
пруф для тех кто приготовил помидоры

Добавлено через 2 минуты
Shakalaka, опередил
0
Эксперт по компьютерным сетямЭксперт NIX
11798 / 6762 / 643
Регистрация: 09.09.2009
Сообщений: 26,698
28.01.2015, 18:04 9
Цитата Сообщение от Shakalaka Посмотреть сообщение
С помощью этой строки вы говорите браузеру
я прекрасно знаю, что я говорю браузеру, тем более, что понять "что именно я там говорю" очень и очень просто - там банально все написано на английском
и я говорю то, что "говорю браузеру", именно потому, что мне именно так и нужно в моем случае
0
Эксперт HTML/CSS
648 / 552 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
28.01.2015, 18:15 10
Цитата Сообщение от Dmitry Посмотреть сообщение
я прекрасно знаю, что я говорю браузеру, тем более, что понять "что именно я там говорю" очень и очень просто - там банально все написано на английском
и я говорю то, что "говорю браузеру", именно потому, что мне именно так и нужно в моем случае
Зачем язвить? Я же не вам объяснял, что значит ваш код... Может человек не знает что он обозначает? Просто скопипастить строку и сказать делай вот так? Тем более что запрещать пользователю масштабировать экран - странная затея. А вдруг он плохо видит, или ему тяжело попасть по ссылке, ну жирные у него пальцы)?
0
Эксперт по компьютерным сетямЭксперт NIX
11798 / 6762 / 643
Регистрация: 09.09.2009
Сообщений: 26,698
28.01.2015, 19:09 11
Цитата Сообщение от Shakalaka Посмотреть сообщение
странная затея. А вдруг он плохо видит
в моем случае так было нужно
и кстати, мой случай - именно для "плохо видящих". без указания масштаба, равного 1, браузер смартфона "считает"!, что у него экран шириной 2к пикселей, и форма для ввода пароля - выглядит "как муха накакала"...
При указании "масштаб=1" смартфон нечаянно обнаруживает, что ширина у него - всего-то 400 пикселей, и форма ввода имеет размер, при котором видно и ее и вводимое значение. Ну а фиксация масштаба избавляет от онанизма, когда при вводе браузер вываливая виртуальную клавиатуру начинает масштабом менять страницу, делая форму ввода снова мелкой (чтоб клава влезла на экран).

Повторюсь - я сделал так, КАК МНЕ БЫЛО НУЖНО. Если кому-то это "странно выглядит, звучит, воспринимается" - это его личные проблемы...
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.01.2015, 19:09

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

@media screen and Заставить работать в ie8
Подскажите как заставить работать масштабирование в ie8. Встречал на хабре инструцию - но там...

Адаптация дизайна.Свойства min-width и max-width
Всем привет.Возникла проблема в понимании свойств min-width и max-width.Если использовать в @media...

что это за ошибка reboot and select proper boot device or insert boot media inselected boot device
Всем Здраствуйте, помогите стакой траблой!? Суть проблемы ,Хочу переустоновть ОС ,но есть проблемы...

Min-width, max-width (растолкуйте)
Значит есть такой код &lt;div class=&quot;subscribers&quot;&gt;&lt;div class=&quot;subscribers__in&quot;&gt;&lt;/div&gt;&lt;/div&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.