Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
0 / 0 / 0
Регистрация: 10.10.2016
Сообщений: 19

Min-width или media query в mozilla

05.11.2017, 13:41. Показов 2448. Ответов 21
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Люди, выручайте. Всю голову поломал. Не знаю куда копать. Ситуация такая. Есть сайт. У него всего 1 брейкпоинт на 768 px. До этого значения я беру min-width 1280px для body и страница пропорционально масштабируется. после 768px я меняю min-width на 768px. Все. Такая конструкция работает в chrome opera, на некоторых андройд. А вот на Mozilla firefox отказывается. Страница не масштабируется, появляются скроллы. Скачок проходит как надо на брейкпоинте, но все остальное не фурычит. Скачал на телефон браузер мозилу. Такая же фигня.

сайт временно лежит на komfortplus36.ru



HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Центр поиска врачей. Медицинское и психологическое консультирование.</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900&subset=latin,cyrillic" rel="stylesheet" type="text/css">
    <link href="css/bootstrap-grid.css" rel="stylesheet" type="text/css">
    <link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/animate.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
    <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
    </head>
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/*=======================================================
                    MEDIA START
========================================================*/
@media screen and (min-width: 1280px) {
 
    .social {
        display: block; }
/*  .phone {
        display: none; }*/
    .hid768 {
        display: block; }
    .vis768 {
        display: none; }
 
 
}
 
@media screen and (min-width: 768px) and (max-width: 1280px) {
    body {
        min-width: 1280px; }
    .container {
    width: 1170px; }
    .social {
        display: block; }
/*  .phone {
        display: none; }*/
    .hid768 {
        display: block; }
    .vis768 {
        display: none; }
 
 
}
 
@media only screen and (max-width: 768px) {
    header .right {
        text-align: left; }
    body {
        min-width: 768px; }
    .container {
    width: 560px; }
    header {
    height: 70px;
    line-height: 70px; }
    .wrap-consult-block:before {
        height: 70px; }
    .consult-block {
        background: transparent; }
    .social {
        display: none; }
/*  .phone {
        display: block;
        text-align: right; }*/
 
    .wrap-consult-info {
        background-image: url(../images/header-backaground-mobile.png);
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center -70px;
        text-align: center;
    }
    .plr0 {
        padding-left: 15px;
        padding-right: 15px;
    }
    .pt175 {
        padding-top: 130px; }
    .hid768 {
        display: none; }
    .vis768 {
        display: block;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px; }
    .h1 {
        font-size: 30px;
        margin: 0;
        line-height: 60px; }
    .h1-text {
        font-size: 28px;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 60px; }
    .h2 {
        margin-top: 90px; }
    .h3 {
        font-size: 30px;
        font-weight: 500;
        line-height: 61px;
        text-transform: uppercase; }
    .h4 {
        font-size: 41px;
        line-height: 65px;  }
 
    .feature .wrap-feat {
        text-align: center;
        margin-bottom: 125px; }
    .feature .mb0 {
        margin-bottom: 0;   }
    .feature .wrap-feat img {
        display: none; }
    .feature .wrap-feat p {
        line-height: 65px;
        font-size: 32px; }
 
 
    .feature {
        padding-top: 50px; }
 
    footer {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .mobw100 {
        width: 100%;
        text-align: center; }
    .mb70 {
        margin-bottom: 70px;}
    footer .social {
        display: block;
        text-align: center; }
 
 
 
}
Ниже фото проблемы.
Миниатюры
Min-width или media query в mozilla   Min-width или media query в mozilla   Min-width или media query в mozilla  

Min-width или media query в mozilla  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
05.11.2017, 13:41
Ответы с готовыми решениями:

Как заставить работать @media, или что такое (min-device-width)
сверстал небольшую адаптацию ... в надежде что она поможет адаптировать менюшку в мобилках и прочих порт. устройствах. Но вот беда, на...

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

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

21
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.11.2017, 14:34
Цитата Сообщение от NeWay Посмотреть сообщение
У него всего 1 брейкпоинт на 768 px. До этого значения я беру min-width 1280px для body и страница пропорционально масштабируется. после 768px я меняю min-width на 768px.
NeWay, а Вас ничего не смущает??
0
0 / 0 / 0
Регистрация: 10.10.2016
Сообщений: 19
05.11.2017, 14:47  [ТС]
что меня должно смущать? может вы не так поняли суть. или я просто не знаю чего то?

Добавлено через 35 секунд
Объясните.
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.11.2017, 15:01
Цитата Сообщение от NeWay Посмотреть сообщение
что меня должно смущать? может вы не так поняли суть. или я просто не знаю чего то?
NeWay, то есть, грубо говоря, при ширине экрана < 1280 у body ширина >= 1280px и Вас это не смущает? Может я действительно что-то не понял.
0
0 / 0 / 0
Регистрация: 10.10.2016
Сообщений: 19
05.11.2017, 15:04  [ТС]
Нет, тут же я использую viewport. И масштаб подбирается исходя из устройства.
Вот смотрите на сайт в google chrome или opera. На телефонах. http://komfortplus36.ru/
Все рендерится нормально. (Если открыть мобильное отображение)

А вот мозила не хочет подстраивать масштаб. Вместо этого она пихает скролл.
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.11.2017, 16:06
NeWay,

Не по теме:

Где то я этот сайт уже видел, у Вас в группе одно задание на всех? :)

0
0 / 0 / 0
Регистрация: 10.10.2016
Сообщений: 19
05.11.2017, 16:16  [ТС]
что за группа? сайт под заказ.
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.11.2017, 16:20
NeWay, Что не так? Chrome, Opera, Firefox. Что Вас не устраивает?
Миниатюры
Min-width или media query в mozilla   Min-width или media query в mozilla   Min-width или media query в mozilla  

1
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.11.2017, 16:24
NeWay, до Вас был еще один парень с точно таким же сайтом, вот только ник я его не запомнил, тоже что то не получалось у него с сайтом, так весь форум замашнил
0
0 / 0 / 0
Регистрация: 10.10.2016
Сообщений: 19
05.11.2017, 16:29  [ТС]
Посмотрите пожалуйста в мобильном отладчике. Например разрешение 800 на 800. В хром, опере и лисе. Вы увидите что хром и опера подгоняют масштаб страницы с размерами окна. А лиса скроллит горизонтально.

Добавлено через 2 минуты
может быть был парень. Мне показывали верстку до этого. Там все было плохо. ( может быть для кого то и у меня плохо). НО я решил переверстать. Все адаптивно , хорошо. Просто такой момент заинтересовал очень сильно! Это не критично. ПРосто хочу понять почему так? дело в мозиле????? или в настройках viewport например??
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.11.2017, 16:44
NeWay, а Вы можете сбросить архив с сайтом?

Добавлено через 3 минуты
NeWay, или попробуйте в
HTML5
1
<meta name="viewport" content="width=device-width, initial-scale=1">
добавить строку initial-scale=1 через запятую.
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.11.2017, 17:07
NeWay, возможно дело в самом браузере. Возможно браузер не хочет зумировать сайт, в других браузерах можно сделать тоже самое и тоже появится скролл, а FireFox вообще не реагирует на такие манипуляции.
Миниатюры
Min-width или media query в mozilla   Min-width или media query в mozilla  
0
0 / 0 / 0
Регистрация: 10.10.2016
Сообщений: 19
05.11.2017, 17:12  [ТС]
Вы увидели то, что я хотел показать?

viewport пробовал разный. Это специфика мозилы я так думаю. ТЕм более никто не знает ответа. я могу скинуть другой пример. он точно также все отражает.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>My test</title>
 
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
    <div class="green">
        <p class="lobster">Здесь должен быть другой шрифт</p>
        <p>Здесь должен быть обычный шрифт</p>
        <img class="border-img" src="http://rgryozy.ru/wp-content/uploads/2017/08/1234.jpg" alt="Цветы" width="200">
    </div>
 
</body>
<script type='text/javascript' src='script.js'></script>
</html>
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
html {
    overflow: hidden;
}
body {
    padding: 100px;
position: relative;
/*overflow: hidden;*/
}
.green {
        background-color: green;
        width: 100%;
        height: 100%;
}
p {
    font-size: 24px;
    padding: 5px;
}
.lobster {
    font-family: "Lobster";
}
.border-img {
    border-width: 10px;
    border-style: solid;
    border-color: green;
    border: 10px solid green;
}
 
 
@media screen and (max-width: 1280px) {
    body {
        width: 1280px; }
 
 
 
}
Вот скопируйте в два файла к себе. и посмотрите в мозилле и хроме. все тоже самое.

Добавлено через 2 минуты
Зеленый блок двигается, когда я уменьшаю браузер до 1280. Как только я достигаю этой отметки в мозиле появляется скрол.
В хроме появляется масштабирование.
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.11.2017, 17:19
NeWay, да увидел, что в firefox у вас появляется нижний скролл. Тогда встречный вопрос. Почему у меня его нету? Это все с Firefox скрины.
Миниатюры
Min-width или media query в mozilla   Min-width или media query в mozilla  
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.11.2017, 17:21
NeWay, и действительно, вас не смущает эта строка кода?
CSS
1
2
3
4
@media screen and (max-width: 1280px) {
body {
     width: 1280px; 
}
0
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2379 / 1739 / 677
Регистрация: 07.08.2016
Сообщений: 4,093
05.11.2017, 17:27
В принципе все браузеры поступают логично. Мозилла при медиа запросе просто ставит фиксированную ширину, как и указано в запросе, из-за этого появляется полоса прокрутки. Опера же с хромом пытаются ужать контент и втиснуть его в экран. Возможно они просто по разному воспринимают плотнось пикселей на мобильных устройствах, отсюда и разное поведение.
1
0 / 0 / 0
Регистрация: 10.10.2016
Сообщений: 19
05.11.2017, 17:30  [ТС]
объясняю) у вас нет нижнего скролла как раз потому что у вас отзывчивый макет. Все содержимое сжимается.

У меня адаптивный макет. Отзывчивости ВООБЩЕ нет. Есть переход на другой вид при 768 пикс. и все. До этого и после этого ширина сайта СТРОГО ФИкСИРОВАННАЯ. задана min-width.

И да! меня бы это смущало если бы это нигде не работало. НО это не работает в мозиле.
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.11.2017, 17:30
AlexZaw, и что в таких ситуациях делают?
0
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2379 / 1739 / 677
Регистрация: 07.08.2016
Сообщений: 4,093
05.11.2017, 17:34
У вас не адаптивный макет, у вас фиксированный макет, но для двух размеров
0
0 / 0 / 0
Регистрация: 10.10.2016
Сообщений: 19
05.11.2017, 17:36  [ТС]
ну да, действительно. я же фактически заблокировал бутстрап.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.11.2017, 17:36
Помогаю со студенческими работами здесь

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

Заставить работать 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; &lt;td class=&quot;right&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;/table&gt; ...

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; его CSS html{ ...

min-width max-width
Помогите разобраться... Резиновый сайт с минимальной и максимальной шириной сайта. При просмотре во весь экран (с большим наполнением...

min-width и max-width
Вобщем стоит цель сделать так, чтобы шаблон работал на всех мониторах. Идет на самом верху шапка сайта, ниже блок меню (выделен черным) и...


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru