Тег @media: некорректная работа

@L13K · Регистрация: 03.12.2011

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

Проблема с адаптивным дизайном.

CSS
1
2
3
@media handheld {
  Описание стиля 
}

не воспринимается. тестировали на galaxy s3 и виндофоне.

далее проблема: оба смартфона тег @media начинают воспринимать от max-width: 1100px.
т.е. поставить значение ниже - 0 восприятия.

и делать телефонные раскладки под 1100px - мягко говоря немного не то.
хотя бы начинать от 800px а лучше от 600.

суть вопроса: как решить проблему? или что я делаю не так?

btw: так же есть 100% рабочий способ перенаправлять на мобильные страницы скриптом, но он отпадает, нужен именно адаптивный вариант.

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

@Cdelphi78 · 18.12.2015, 00:56

Всегда пишу @media all and max-width пока никаких загвоздок невозникало, я как понял all and еще и приоритетное самое)

@vitsuk · 18.12.2015, 01:10

L13K, @media only screen and (max-width: 766px) and (min-width: 517px)- и задавай себе расширения

@L13K · 18.12.2015, 01:17 **[ТС]**

увы не работает.
http://test.coderange.ru/serf/index5.html пример.

текст будет красный, если попасть в разрешение

CSS
1
2
3
4
5
6
@media only screen and (max-width: 766px) and (min-width: 517px) {
 
.logobig {
color: red;
}
}

@vitsuk · 18.12.2015, 01:31

L13K, скинь код или сделай принскрины!! да загрузи на сервер!!

@L13K · 18.12.2015, 01:46 **[ТС]**

загрузил же.

ксс

CSS
1
2
3
4
5
@media only screen and (max-width: 766px) and (min-width: 517px) {
.logobig {
color: red;
}
}

хтмл:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<link type="text/css" rel="StyleSheet" href="test.css" />
</head>
<body>
<center>
<div class="logobig"> 123123123123123123213</div>
</center>
</body>
</html>

del
как это смотрится с телефона

http://test.coderange.ru/serf/index5.html
тут можно посмотреть самому

@vitsuk · 18.12.2015, 01:57

L13K, ну а скажи пожалуйста какое расширения у galaxy s3? то и поставь!!!!!!!!

CSS
1
2
3
4
5
@media only screen and (max-width: 370px) and (min-width: 300px) {
.logobig {
color: red;
}
}

пробуй!!

@L13K · 18.12.2015, 02:04 **[ТС]**

разрешение на подобных телефонах, как выяснилось методом тыка - от 1100 и выше, что ненормально.
и в целом мне не нужно под конкретный телефон, нужны установки чтобы охватить большинство телефонов.

@vitsuk · 18.12.2015, 02:08

L13K, @media only screen and (max-width: 1100px) and (min-width: 300px)
все что выше 1100 и ниже 300 текст будет черным цветом!! протестируй и увидишь!!!
а возьми но посмотри какие расширения в телефонах!!

@L13K · 18.12.2015, 02:13 **[ТС]**

уважаемый, вы посмотрите топ темы. делать телефонную раскладку под 1100 идиотизм, это уже не совсем корректное отображение на планшетах и совсем не корректное на мониторах к примеру 1024х768.
суть вопроса была в том, как применить адаптивную раскладку к сайту, не искажая его на больших разрешениях.

!!!!!!!!!!!!!!! (не удержался).

зы: спасибо кэп

@vitsuk · 18.12.2015, 02:23

L13K, Так правильно если вы делаете адаптивную верстку вам нужно захватить чем побольше мобильных устройств, а нет то под стационарные делайте одну а под мобильные другую,

@L13K · 18.12.2015, 02:33 **[ТС]**

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

@vitsuk · 18.12.2015, 02:48

L13K, @media only handheld and (max-width: 1100px) and (min-width: 300px) а если так попробовать?

@L13K · 18.12.2015, 03:10 **[ТС]**

handheld как опять же уже говорил в топике не воспринимается никак.

@Fedor92 · 18.12.2015, 11:26

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

handheld как опять же уже говорил в топике не воспринимается никак.

Шикарнейший медиа-запрос Вы в стили воткнули, что-то есть подозрение в работоспособности такой красоты...

И на заметку для указания стилей:

HTML5
1
<link type="text/css" rel="stylesheet" href="test.css">

Путь к стилям указан верно так что разбирайтесь с адекватностью медиа-запроса...

@L13K · 18.12.2015, 15:00 **[ТС]**

хорошо, вот 2 примера.
1, где пытаюсь сделать раскладку под мобилку http://surf-portugal.ru/
сожмите окно до 1100 и менее и увидите всю дикость метода.

2, где раскладка при мелких (меньших чем 1100) разрешениях работает и в т.ч. воспринимается телефонами обсуждаемыми в теме http://shop.pozhesti.com/

Добавлено через 16 минут
извиняюсь сайт перекрыт. вот ссылка на 1 пример http://test.coderange.ru/serf/index3.html

@Fedor92 · 18.12.2015, 15:18

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

сожмите окно до 1100 и менее и увидите всю дикость метода.

L13K а в чём заключается дикость метода? Имеет смысл изменить порог с 1100px до 768px или поменьше на ширину экрана самого большого смартфона...
Кстати, у Вас не подключаются стили demo.css и картинка 6.jpg...

@Анар · 18.12.2015, 15:20

Медиазапрос handheld практически никогда нормально не работал, поскольку механизм его работы (на сколько я помню) зависит от того, сообщается ли браузеру от устройства (а браузером сайту), что устройство является "handheld" или нет. Как вы понимаете, разработчики на одном месте крутили данный функционал и он сейчас практически нигде не работает. И соответственно верстальщиками не используются.
Используйте max-width, начиная с ширины контента сайта, и не парьтесь.

@L13K · 18.12.2015, 23:56 **[ТС]**

да.. там недобитая демка. я показываю ей суть. представьте это на нетбуке или на экране пк (мелком).
т.е. на таких экранах по хорошему все вкладки с ценами, должны inline block`ами формироваться, по 2-3 в ряд, а уже на телефоне они должны вертикально идти один за другим. проблема которая возникла в данном случае взаимоисключает одно из другого.

меня настораживает тот факт, что здесь есть какая то тотальная ошибка. я не понимаю почему в сайте-примере, который я дал ниже (магазин). та же раскладка мобильного меню, включается на ширине примерно в 600-700 пикс, и спокойно воспринимается к примеру моим телефоном (который может воспринимать установки от 1100 пикс и более).

Добавлено через 8 часов 17 минут
вобщем решил проблему скриптом, чтобы при определении мобилки открывался мобильный ксс с надстройками.
можно закрывать.

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK сделайте это, JDK, то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера . . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	18.12.2015, 00:56
	Всегда пишу @media all and max-width пока никаких загвоздок невозникало, я как понял all and еще и приоритетное самое) 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	18.12.2015, 01:10
	L13K, @media only screen and (max-width: 766px) and (min-width: 517px)- и задавай себе расширения 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	18.12.2015, 01:31
	L13K, скинь код или сделай принскрины!! да загрузи на сервер!! 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	18.12.2015, 02:04 [ТС]
	разрешение на подобных телефонах, как выяснилось методом тыка - от 1100 и выше, что ненормально. и в целом мне не нужно под конкретный телефон, нужны установки чтобы охватить большинство телефонов. 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	18.12.2015, 02:08
	L13K, @media only screen and (max-width: 1100px) and (min-width: 300px) все что выше 1100 и ниже 300 текст будет черным цветом!! протестируй и увидишь!!! а возьми но посмотри какие расширения в телефонах!! 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	18.12.2015, 02:13 [ТС]
	уважаемый, вы посмотрите топ темы. делать телефонную раскладку под 1100 идиотизм, это уже не совсем корректное отображение на планшетах и совсем не корректное на мониторах к примеру 1024х768. суть вопроса была в том, как применить адаптивную раскладку к сайту, не искажая его на больших разрешениях. !!!!!!!!!!!!!!! (не удержался). зы: спасибо кэп 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	18.12.2015, 02:23
	L13K, Так правильно если вы делаете адаптивную верстку вам нужно захватить чем побольше мобильных устройств, а нет то под стационарные делайте одну а под мобильные другую, 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	18.12.2015, 02:33 [ТС]
	опять же в заголовке темы уже обозначил, что отдельная мобильная версия в данном случае отпадает. 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	18.12.2015, 02:48
	L13K, @media only handheld and (max-width: 1100px) and (min-width: 300px) а если так попробовать? 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	18.12.2015, 03:10 [ТС]
	handheld как опять же уже говорил в топике не воспринимается никак. 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	18.12.2015, 15:00 [ТС]
	хорошо, вот 2 примера. 1, где пытаюсь сделать раскладку под мобилку http://surf-portugal.ru/ сожмите окно до 1100 и менее и увидите всю дикость метода. 2, где раскладка при мелких (меньших чем 1100) разрешениях работает и в т.ч. воспринимается телефонами обсуждаемыми в теме http://shop.pozhesti.com/ Добавлено через 16 минут извиняюсь сайт перекрыт. вот ссылка на 1 пример http://test.coderange.ru/serf/index3.html 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	18.12.2015, 15:20
	Медиазапрос handheld практически никогда нормально не работал, поскольку механизм его работы (на сколько я помню) зависит от того, сообщается ли браузеру от устройства (а браузером сайту), что устройство является "handheld" или нет. Как вы понимаете, разработчики на одном месте крутили данный функционал и он сейчас практически нигде не работает. И соответственно верстальщиками не используются. Используйте max-width, начиная с ширины контента сайта, и не парьтесь. 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	18.12.2015, 23:56 [ТС]
	да.. там недобитая демка. я показываю ей суть. представьте это на нетбуке или на экране пк (мелком). т.е. на таких экранах по хорошему все вкладки с ценами, должны inline block`ами формироваться, по 2-3 в ряд, а уже на телефоне они должны вертикально идти один за другим. проблема которая возникла в данном случае взаимоисключает одно из другого. меня настораживает тот факт, что здесь есть какая то тотальная ошибка. я не понимаю почему в сайте-примере, который я дал ниже (магазин). та же раскладка мобильного меню, включается на ширине примерно в 600-700 пикс, и спокойно воспринимается к примеру моим телефоном (который может воспринимать установки от 1100 пикс и более). Добавлено через 8 часов 17 минут вобщем решил проблему скриптом, чтобы при определении мобилки открывался мобильный ксс с надстройками. можно закрывать. 0