Почему на разных мониторах сайт отображается по разному
Обновлено: 20.05.2024
В браузерах на одном компьютере он отображается нормально. В Firefox, Google Crome, IE9 и Opera.
На другом компьютере в тех же браузерах слегка другая картина.
Возьмем для примера Фаерфокс. Такое чувство, что один из них читает не все стили, например, font-stretch. Или же неверно обрабатывает некоторые padding. Второй (на другом компьютере, но той же версии) - все идеально.
Исключение составляет только ИЕ9, который и там и там показывает идеальное совпадение. Все равно, ничего не едет.
С чем это связано? В какую сторону копать, по поводу чего гуглить?
Коль скоро на одной машине в разных браузерах все хорошо, а на другой все не очень хорошо, то объективно, кроме шрифтов, т.е. их наличия в системе, докопаться не к чему.
Одно но. Если дизайн резиновый и при этом смотрится на совсем разных мониторах. в этом случае ощущения могут быть субъективно разными, если просматривать одновременно. Типо оптического обмана.
Но отсутствие шрифтов ИМХО более реально
Для чистоты эксперимента нужен 3 компьютер)
Шрифты есть и там и там, некорректно настраивается ширина шрифта.
Проверил еще на двух - всюду плывет. Каким-то образом, только на одном компе все нормально выглядит.
ну прогуглив по быстрому я наткнулся на статью от января месяца сего года в которой кроме прочего написано:
На момент написания статьи это свойство не поддерживается ни одним из распространенных браузеров.не знаю на сколько авторитетен источник, но может это и причина. Да и ослику надо быть хоть в чем-то первым))))
Каким-то образом, только на одном компе все нормально выглядитзы: дайте урл в личку, любопытно
samimages, точно. Я сейчас тоже читаю про это злополучное свойство, и правда, что браузеры его не едят.
Это плохо, придется переделывать все надписи другим шрифтом или размером. А так красиво выглядело-то, эх.
Ну ничего, где наша не пропадала. :)
t_o_x_a, да ради бога!)))
я обычно по htmlbook сверяюсь, когда не уверен, у него там табличка совместимости есть.
samimages добавил 28.09.2011 в 01:51
ЗЫ: Закомментируйте пока, а как поддержку включат вернете. Сайт же не на неделю делаете тем более ослик вроде как держит уже.
samimages, я тоже стараюсь если и использовать какую-нибудь фишку из третьего ЦСС, делать это так, чтобы при ее отсутствии оформление не страдало. Тени какие-нибудь или же закругления.
Когда половина сайта к чертям едет, это, конечно, не вариант.
t_o_x_a добавил 28.09.2011 в 01:53
samimages:Закомментируйте пока, а как поддержку включат вернете. Сайт же не на неделю делаете тем более ослик вроде как держит уже..
Ну, такой малой кровью не обойдешься, потому что там все подгоняется под определенный размер и чуть что, все едет. Придется использовать стандартную ширину шрифта, просто семейство другое выбрать.
Сайт на годы, надеюсь, когда-нибудь все браузеры будут обучены современным технологиям.
А кто-нибудь мне поможет?
У всех людей монитор с разными разрешениями экрана.
И мой сайт у всех отображается по разному. У кого-то на весь экран, а у кого-то только на половину.
Я читала, что для этого нужно. цитирую "избегайте постоянного разрешения при создании сайта, создавайте динамическое. Делается это проще простого: там, где вы указываете жесткие размеры в пикселях, поставьте размер в процентах, то есть если вы поставите какому-либо элементу длину 100 процентов, то на любом экране (с любым разрешением) он будет занимать всю длину экрана, а если вы поставите 80 процентов, то он постоянно будет занимать только 80 процентов длины. В этом простом действии и кроется успешная визуальная составляющая вашего сайта."
Так вот сайт уже создан, а как узнать, какое разрешение на моем сайте. И как сделать динамическое разрешение? Потому, что я заметила у кого стоит Опера, мой сайт видят только на половину. У кого Гугл хром, все нормально.
Скажу, что я новичок, сайт молодой, я учусь и если будете объяснять, то объясните для чайника)) Спасибо.
Помощь в написании контрольных, курсовых и дипломных работ здесь
Плохо отображается сайт на разных разрешениях экрана
Добрый день, помогите мне пожалуйста. У меня есть сайт и он плохо отображается на разных.
Почему сайт в разных браузерах отображается по-разному?
Пожалуйста помогите почему сайт в разных браузерах отображается по-разному ?
Рассмотрим вариант построения динамического сайта.
Порядок в html-коде:
body - ширина 100%
header - ширина 100%
menuLeft - ширина фиксировна+ float: left
menuRight - ширина фиксирована + float:right
content - ширина 100%, но margin-left и margin-right чуть более фиксированной ширины левого и правого бока соответственно, т.е. чтобы контент стал в аккурат между левым и правым меню.
footer - ширина 100% очистка от обтекания clear:both;
Результат: меню везде одинаковы, разница в разрешении компенсируется динамически изменяющимся content'ом.
Сайт будет смотреться одинаково, если всему задать фиксированные размеры, самый большой из которых стремиться к минимальному разрешению в 1024px или даже 800.
Обратите внимание на этот форум. Здесь правого меню нет и разница компенсируется полем постов
В предыдущей статье я уже писал о том, что такое адаптивный дизайн и зачем он нужен. Но как достичь этой самой адаптивности?
Как сделать адаптивную верстку сайта
Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами <head></head> вставьте следующий код:
Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта.
Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.
Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.
Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!
Но ведь этого не может быть!
Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.
Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).
Адаптивная верстка CSS media запросы
Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.
Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:
То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.
Самые важные разрешения экрана, при адаптивной верстке
- 320 px — Мобильные устройства (портретная ориентация);
- 480 px — Мобильные устройства (альбомная ориентация);
- 600 px — Небольшие планшеты;
- 768 px — Планшеты (портретная ориентация);
- 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более — PC.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.
bootstrap адаптивный дизайн
Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.
Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.
Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.
Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:
Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.
Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:
Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.
Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.
В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.
Проверка адаптивности сайта
Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.
Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.
Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.
Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.
Скриншот сайта на разных экранах
Для отображения сайта пиксель в пиксель
Ниже код, который заставляет отображать сайт пиксель в пиксель на всех устройствах. И если у маленького экрана разрешение к примеру 6дюймов и 1280*800, то сайт будет малюсенький. А если экран 320*480px, то на экране отобразится кусочек сайта этих размеров. В данном примере значение 1:1, то-есть рано 1.0. Можно ставить свои значения и увеличивать или уменьшать сайт. К примеру на андроид и apple область просмотра сайтов 960-1024px, это значит что сайты с такой шириной будут отображаться на весь экран и без прокрутки, и это не зависит от фактического разрешения экрана, сайт просто масштабируется под размер экрана, Но если добавить этот тег То сайт начнет отображаться в соответствии с аппаратными пикселями, и если разрешение маленькое, то сайт будет слишком крупным и появится прокрутка, а если разрешение большое, то сайт будет маленьким. По-этому один этот viewport ничего не решает, он просто отображает сайт в соответствии с аппаратными пикселями, и отменяет настройки браузеров, что не правильно так-как у браузеров могут буть свои настройки.Верстка сайта под разные экраны
То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.
Скриншоты сайта е ветерок ру
Так у неё отражается:
Причём у себя я смотрел с разных компов, и всё нормально, а у неё так.
Намекните хоть, в какую сторону думать?
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков 1,248 2 2 золотых знака 18 18 серебряных знаков 41 41 бронзовый знак я смотрел, кстати, во всех современных браузерах - норм, она сказала, что и в хроме, и в опере, и с телефона всё плывёт.Пусть попробует обновить без кэша страницу. Мало-ли, что-то закэшировалось, и теперь "выплывает" подобным эффектом.
Но, в общем - странно. Такое чувство, что часть css-а не подгрузилась. (если только снизу сайта плывет.)
У меня - все нормально. Хром.
Ctrl+F5 или открыть сайт в анонимном режиме. В MSIE Ctrl+F5 обязательно. Пусть еще в хроме или опере, если у нее не 12 Opera , нажмет Ctrl+Shift+F12 и скажет какие ошибки видны во вкладке консоль.
У меня светло-серый фон немного более узкий, чем тот, что над ним, темно-серый, пикселей на 15. Следовательно - баги в верстке. Chrome.
Если уж на моем разбитом ноутбуке (XP) в Хроме все нормально, значит и везде нормально)) Пусть она проверит на других компьютерах в офисе или у знакомых, есть ли такая ситуация. Причина может быть разная. Я например, пару раз отключила компьютер, вытащив вилку из розетки и у меня отлетела шапка на диспетчере задач. Но это не значит, что такая же ситуация происходит у всех. С сайтом все нормально. Пусть попробует переставить проблемные браузеры на новые версии и почистить компьютер (вирусы, реестр и тд.)
1) да ошибки где An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. они на на внешний вид сайта не сыграют роль, но alt for img лучше все-таки прописать;
2) пропишите title;
3) End tag ul seen, but there were open elements. Это необходимо исправлять;
4) подключите одну библиотеку jquery - сейчас у вас так:
5) если доктайп HTML5 - тогда зачем так подключать <meta http-equiv="Content-Type" content="text/html; charset=utf-8">?
Читайте также: