Не работают медиа запросы

@wchk · Регистрация: 11.04.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте! Помогите новичку, пожалуйста!

Есть сайт не responsive. Клиент захотел, чтобы на мобильном сайт выглядел "точно так же, как и на десктопе". Ну типа как в опере мини раньше, помните, грузится весь сайт такой маленький-маленький, а потом ты зумишь и пользуешься им. Такое вот захотел клиент.

Я легко достиг этого эффекта добавив

HTML5

1	<meta name="viewport" content="width=1024">

И все бы ничего, но все-таки различия в интерпретации стилей между мобильным и десктопом проскакивают. А клиент перфекционист. Ему пиксель в пиксель все должно быть одинаково. Меня бы тут здорово выручили медиа запросы, да вот с моим значением вьюпорта они почти вообще не работают. Что посоветуете?

@Janosense · 11.04.2016, 23:10

Сообщение от wchk

интерпретации стилей между мобильным и десктопом проскакивают

Может вы уже и знаете но и между мобильными устройствами, да такие что страшной порой бывает.
А есть какое-то требование чтобы ширина была именно 1024? Почему вы не используете:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Да и сам сайт бы показали, легче было бы посоветовать что-то.

@wchk · 11.04.2016, 23:59 **[ТС]**

Да и сам сайт бы показали, легче было бы посоветовать что-то.

Окей, вот сайт: http://decovision.zhurnalistov.net/

А есть какое-то требование чтобы ширина была именно 1024?

Есть статичная верстка шириной 1024 пикселя. Все это делал не я. Моя задача сделать так, чтобы на мобильном это выглядело так же, как и на десктопе. Но только на десктопе из-за горизонтальной ориентации экрана слева и справа от контента будет много фона, а на мобильном такого фона не будет.

Почему вы не используете:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Потому что если я буду использовать width=device-width, то сайт будет открываться не так, как хочет клиент. Клиент хочет чтобы когда клиент заходит на сайт с мобильного, он видел , а не .

@dimon888951 · 12.04.2016, 04:57

Это какой то извращенный подход. Мобильная версия сайта делается для того, чтобы отобразить этот сайт, сделать его функционал максимально комфортным для мобильных пользователей. А какой комфорт если вы в один ряд расположите 5 картинок к примеру на устройстве с шириной 320, ладно с картинками штукатурок,а как вы расположите в ряд 5 надписей, уменьшите шрифт до 5 пикселей, чем сделаете текст нечитаемым.

@wchk · 12.04.2016, 10:13 **[ТС]**

Это какой то извращенный подход.

В какой-то степени да. Хотя скорее попросту устаревший подход, когда responsive еще не было.

Мобильная версия сайта делается для того, чтобы отобразить этот сайт, сделать его функционал максимально комфортным для мобильных пользователей.

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

А какой комфорт если вы в один ряд расположите 5 картинок к примеру на устройстве с шириной 320, ладно с картинками штукатурок,а как вы расположите в ряд 5 надписей, уменьшите шрифт до 5 пикселей, чем сделаете текст нечитаемым.

Сайт открывается, а потом посетитель зумит ручками. Согласен, не очень удобно. Но такова воля клиента.

@Janosense · 12.04.2016, 13:27

Сообщение от wchk

выбор клиента, его воля

Вечная борьба зла и добра)) Я поэкспериментировал - чтобы добиться того что хочет ваш заказчик нужно вообще не использовать мета тег viewport, а ширина родительских контейнеров при этом должна быть задана явно в px т.е. фиксированной. Проверил Safari iOS и Opera Android - по крайней мере в них работает.

@wchk · 12.04.2016, 13:47 **[ТС]**

Вечная борьба зла и добра)) Я поэкспериментировал - чтобы добиться того что хочет ваш заказчик нужно вообще не использовать мета тег viewport, а ширина родительских контейнеров при этом должна быть задана явно в px т.е. фиксированной. Проверил Safari iOS и Opera Android - по крайней мере в них работает.

То есть медиа запросы не используются вообще? И вьюпорт тоже? А ширина контентной части какая?

@wchk · 13.04.2016, 18:00 **[ТС]**

Вот, значицца, такой код я использую для подмены вьюпорта. Да костыль, но с ним хоть как-то можно использовать медиа запросы.

Javascript

<script type="text/javascript">
            setViewPort();
                function setViewPort() {
                    if (screen.width > 319 && screen.width < 800) {
                      document.getElementById("viewport").removeAttribute("content");
                      document.getElementById("viewport").setAttribute("content", "width=1024");
            } else {
                      document.getElementById("viewport").removeAttribute("content");
                      document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1");
             }
            }
 
        </script>

@Janosense 45 / 41 / 22 Регистрация: 28.01.2015 Сообщений: 162
	11.04.2016, 23:10	2
	Сообщение от wchk интерпретации стилей между мобильным и десктопом проскакивают Может вы уже и знаете но и между мобильными устройствами, да такие что страшной порой бывает. А есть какое-то требование чтобы ширина была именно 1024? Почему вы не используете: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Да и сам сайт бы показали, легче было бы посоветовать что-то. 1

@wchk 0 / 0 / 0 Регистрация: 11.04.2016 Сообщений: 5
	11.04.2016, 23:59 [ТС]	3
	Да и сам сайт бы показали, легче было бы посоветовать что-то. Окей, вот сайт: http://decovision.zhurnalistov.net/ А есть какое-то требование чтобы ширина была именно 1024? Есть статичная верстка шириной 1024 пикселя. Все это делал не я. Моя задача сделать так, чтобы на мобильном это выглядело так же, как и на десктопе. Но только на десктопе из-за горизонтальной ориентации экрана слева и справа от контента будет много фона, а на мобильном такого фона не будет. Почему вы не используете: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Потому что если я буду использовать width=device-width, то сайт будет открываться не так, как хочет клиент. Клиент хочет чтобы когда клиент заходит на сайт с мобильного, он видел , а не . 0

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	12.04.2016, 04:57	4
	Это какой то извращенный подход. Мобильная версия сайта делается для того, чтобы отобразить этот сайт, сделать его функционал максимально комфортным для мобильных пользователей. А какой комфорт если вы в один ряд расположите 5 картинок к примеру на устройстве с шириной 320, ладно с картинками штукатурок,а как вы расположите в ряд 5 надписей, уменьшите шрифт до 5 пикселей, чем сделаете текст нечитаемым. 1

@wchk 0 / 0 / 0 Регистрация: 11.04.2016 Сообщений: 5
	12.04.2016, 10:13 [ТС]	5
	Это какой то извращенный подход. В какой-то степени да. Хотя скорее попросту устаревший подход, когда responsive еще не было. Мобильная версия сайта делается для того, чтобы отобразить этот сайт, сделать его функционал максимально комфортным для мобильных пользователей. Данный подход - выбор клиента, его воля. Клиент считает, что именно так должен работать его сайт, что именно этого хотят его пользователи. Другие предложения были им отвергнуты. А какой комфорт если вы в один ряд расположите 5 картинок к примеру на устройстве с шириной 320, ладно с картинками штукатурок,а как вы расположите в ряд 5 надписей, уменьшите шрифт до 5 пикселей, чем сделаете текст нечитаемым. Сайт открывается, а потом посетитель зумит ручками. Согласен, не очень удобно. Но такова воля клиента. 0

@Janosense 45 / 41 / 22 Регистрация: 28.01.2015 Сообщений: 162
	12.04.2016, 13:27	6
	Сообщение от wchk выбор клиента, его воля Вечная борьба зла и добра)) Я поэкспериментировал - чтобы добиться того что хочет ваш заказчик нужно вообще не использовать мета тег viewport, а ширина родительских контейнеров при этом должна быть задана явно в px т.е. фиксированной. Проверил Safari iOS и Opera Android - по крайней мере в них работает. 0

@wchk 0 / 0 / 0 Регистрация: 11.04.2016 Сообщений: 5
	12.04.2016, 13:47 [ТС]	7
	Вечная борьба зла и добра)) Я поэкспериментировал - чтобы добиться того что хочет ваш заказчик нужно вообще не использовать мета тег viewport, а ширина родительских контейнеров при этом должна быть задана явно в px т.е. фиксированной. Проверил Safari iOS и Opera Android - по крайней мере в них работает. То есть медиа запросы не используются вообще? И вьюпорт тоже? А ширина контентной части какая? 0

Опции темы