alleclf

Понятно, спасибо.

что прям вообще не имеет значения?

Часто встречаю разные варианты для тега background. Ссылка на картинку может быть в двойных кавычках, одинарных, или вообще без кавычек. Работают все варианты. Скажите пожалуйста, как правильно? Вот пример: - background:url('http://site.com/error.png')- одинарные - background:url("http://site.com/error.png")- двойные - background:url(http://site.com/error.png) - без кавычек

Необходим скрипт меняющий картинку при загрузке страницы. Например, есть папка с картинками, 10-20 шт. Надо чтобы при каждой новой загрузке странички подгружалась рандомная картинка из этой папки. Очень желательно на PHP. Гугл особо не помог, то слайдеры то javascript. Подскажите пожалуйста как реализовать, или где почитать.

Есть способ отобрать именно мобильные устройства - телефоны, смартфоны, планшеты?

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

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

Для отладки использовал такую схему: <link rel="stylesheet" media="screen and (orientation:portrait) and (max-width:240px)" href="{THEME}/css/style_p.css" /><link rel="stylesheet" media="screen and (orientation:landscape) and (max-width:480px)" href="{THEME}/css/style_l.css" />Как правильно объединить эти два медиазапроса в один? <link rel="stylesheet" media="screen and (((orientation:portrait) and (max-width:240px)) or ((orientation:landscape) and (max-width:480px)))" href="{THEME}/css/style_p.css" />Так правильно? Можно ли использовать вложенные выражения?

как-то сложно, мне проще отступ сверху сделать вручную, размер то известен

Как разместить один блок в центре другого блока? Вот заготовка - http://jsfiddle.net/u8zsehb5/ получается только по горизонтали центрировать, а как по вертикали сделать?

Где модно посмотреть у каких устройств какой PixelRatio. Хочу понять зависимость PixelRatio от разрешения экрана или физических размеров.

а тестировать тогда как? В эмуляторе одно, реально другое.

Switch74, так я и сделал дизайн под разные разрешения, где всё нормального удобного размера. А теперь из-за этого PixelRatio всё получается слишком большим.

Вот результат с моей мобилки на первом скрине чистый код предложенный Great Rash, на втором я в head дописал свой скрипт из первого поста. Размер блока в коде указан в 128пх, очень хорошо видно что в первом варианте там около 200пх, а вот во втором как-раз 128пх! О чём я и говорил - без скрипта разрешение экрана не правильно определяется. Правильно будет только на устройствах с PixelRatio = 1.

Great Rash, хорошо, попробую напишу

А если будет иное разрешение экрана? Что будете делать? Иконки надо делать либо в 2 раза больше, либо делать через svg. я сверстал уже много, под разные разрешения, всё работает но не так как я ожидал. Сейчас тестирую скрипт на разных устройствах. С андроидом проблем нет. Пытаюсь найти айФон и что-нибудь с ВиндовзФоном.

Экран 480х854 определяется как 320х480, надо как-то указать это браузеру, device-width берет именно 320пх а не 480. Все иконки на экране увеличенные и выглядят размыто. Если я вручную укажу во вьюпорте width=480 страничка грузится как надо и выглядит отлично. Я пытаюсь найти универсальное решение, под любые экраны. И скрипт из первого поста с этим справляется. Единственный минус - при смене ориентации страничка просо растягивается, вроде как 480пх растянуть на 854пх и надо либо перегрузить страничку либо перейти по ссылки на другую.

я могу так написать, но разве это изменит разрешение экрана? Оно как было меньше так и останется.

спасибо

Можно ли скриптом отловить смену ориентации экрана устройства?

почему тогда мой мобильник распознается как 320х480, хотя реальное разрешение 480х854 соответственно грузятся не те стили и всё на экране увеличенное. Даже при перевороте мобилки с портретной ориентации в ландшафтную всё еще сильней увеличивается, так как - в вертикальной ориентации разрешение не 480 а 320 - коэффициент 1.5 - в горизонтальной не 854 а 480 - коэффициент 1.7

Замучился с адаптивным дизайном. Наконец-то понял почему разрешение на мобильных устройствах занижается. Вот тут хорошая статья http://programador.ru/dp/ Вот нашел скрипт, но он определяет "devicePixelRatio" - это для ретины, да и не работает он, на мобилке сайт зависает при загрузке - просто белый фон и делает вид что что-то грузит <script>$(function() {if (window.devicePixelRatio !== 1) { var dpt = window.devicePixelRatio; var widthM = window.screen.width * dpt; var widthH = window.screen.height * dpt; document.write('<meta name="viewport" content="width=' + widthM+ ', height=' + widthH + '">');}}) </script>Скажите пожалуйста, как можно переделать скрипт чтобы переопределить разрешение экрана. В статье (ссылка выше) формула есть, не пойму как определить dp-устройства и заставить устройство правильно определить разрешение экрана.

это очень похоже на то что надо, сейчас скачаю посмотрю...

Не совсем то. Я так и сам могу окно браузера изменять и смотреть. Я имел ввиду немного другое. Например, посмотреть как будет выглядеть сайт на экране 6" c разрешением 1080x1920 - большое разрешение на маленьком экране. Я не могу на компе плотность пикселей изменить.

Подскажите инструмент для тестирования адаптивного дизайна. Я на одном компьютере и мобильнике многого не проверю. Желательно что бы он под разные разрешения подстраивался, то есть показал как будет выглядеть сайт на 6-дюймовом смартфоне с fullHD разрешением на моем мониторе с разрешением 1680х1050 - не пиксель в пиксель, а в натуральный размер. Кто как тестирует? Помню, находил сайт какой-то, так там прямо в окошке в форме смартфона или планшета можно было на свой сайт посмотреть.