Почему на разных компьютерах сайт отображается по разному
В браузерах на одном компьютере он отображается нормально. В 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:
Закомментируйте пока, а как поддержку включат вернете. Сайт же не на неделю делаете тем более ослик вроде как держит уже..
Ну, такой малой кровью не обойдешься, потому что там все подгоняется под определенный размер и чуть что, все едет. Придется использовать стандартную ширину шрифта, просто семейство другое выбрать.
Сайт на годы, надеюсь, когда-нибудь все браузеры будут обучены современным технологиям.
Кроссбраузерность — одна из важнейших характеристик любого сайта, подразумевающая одинаково корректное отображение и работу ресурса в разных браузерах, а также их версиях. Для того, чтобы сайт правильно функционировал в Google Chrome, Яндекс.Браузере, Safari, Opera, Firefox, Android Browser и т.д. как на стационарных, так и на мобильных устройствах, необходимо решить вопрос кроссбраузерности еще на этапе верстки. О том, как протестировать сайт на кроссбраузерность и добиться этого свойства, мы рассказываем в данной статье.
Как протестировать сайт на кроссбраузерность
- Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, к слову, можно установить только на macOS.
- Использование специальных онлайн-сервисов. Этот способ прост и надежен. Таких сервисов достаточно много: есть и бесплатные, но с определенными ограничениями, и платные, но более функциональные и быстрые.
Здесь можно бесплатно проверить сайт на корректность отображения информации в различных браузерах (около 65) и операционных системах. В зависимости от степени загруженности сервера запросами проверка занимает от пяти минут до двух часов. Если вы хотите ускорить процесс, рекомендуем приобрести доступ к так называемой «приоритетной обработке».
Результаты тестирования предоставляются пользователю в виде скриншотов. На них видно, все ли в порядке с кроссбраузерностью сайта или над ней нужно еще поработать.
Из бесплатных сервисов также можно использовать CrossBrowserTesting, Browserling и т.д. Каждый из них отличается определенными функциональными особенностями и возможностями. Некоторые сервисы требуют пройти регистрацию, на других можно проверить сайт и без нее.
Если вы планируете использовать платный сервис, попробуйте BrowserStack . Этот мощный инструмент в режиме реального времени проверяет сайты на кроссбраузерность в более чем 2000 браузеров и устройств. А еще здесь есть бесплатный пробный период.
Кроме онлайн-сервисов, существуют и специальные приложения. К примеру, Multi-Browser Viewer. Этот инструмент позволяет проверить не только корректность отображения данных в разных браузерах, но и то, насколько правильно сайт функционирует.
В чем выражается кроссбраузерность сайта и почему она так важна
Если сайт некорректно отображается, неправильно работает в одном или нескольких популярных браузерах, то он неудобен для использования. Посетители будут уходить с него, не просмотрев и одной страницы. Таким образом, увеличится показатель отказов, а, как известно, этот поведенческий фактор ранжирования сайтов имеет весомое значение. Поисковые роботы посчитают такой сайт неинтересным и понизят его позиции в органической выдаче. О конверсиях, разумеется, не может быть и речи, поскольку пользователю не удалось ознакомиться с предлагаемой продукцией или услугой.
Проанализируем конкурентов, подберем запросы с низкой конкуренцией, проведем поисковую оптимизацию сайта, организуем внешнюю ссылочную массу, проработаем карточки компании на онлайн картах, проведем базовую UX-аналитику сайта. Над каждым проектом работает от 6 до 10 специалистов. Собственные разработчики для доработки сайта при необходимости. От вас - сайт, от нас - позиции в Яндекс/Google и трафик.
При этом сайт не должен абсолютно одинаково выглядеть во всех браузерах. Вам достаточно:
- сохранить структуру;
- не допустить развала верстки;
- избежать наложения текста на текст, изображения;
- сохранить читабельность информации.
Главное, чтобы клиенту было удобно читать, просматривать изображения и совершать действия на сайте с того браузера, которым он привык пользоваться.
Самые популярные браузеры среди пользователей Рунета
По данным Яндекс.Радара за июнь 2020 года, в большей степени пользователи Рунета предпочитают Google Chrome, Яндекс.Браузер и Safari.
Самые популярные браузеры среди пользователей Рунета
Что касается браузеров на мобильных устройствах, то здесь Яндекс.Браузер и Safari меняются местами.
Самые популярные браузеры на мобильных устройствах
Подводя итоги, стоит сказать, что добиться абсолютно идентичного отображения сайта во всех браузерах практически невозможно. Поэтому главной целью должен быть не единый дизайн, а читабельность текста, привлекательность изображений, доступность всех важных элементов и корректная работа функционала.
Так у неё отражается:
Причём у себя я смотрел с разных компов, и всё нормально, а у неё так.
Намекните хоть, в какую сторону думать?
я смотрел, кстати, во всех современных браузерах - норм, она сказала, что и в хроме, и в опере, и с телефона всё плывёт.
Почему сайты могут по-разному отображаться и работать в разных браузерах
Причина этой проблемы — отличия в исходном коде. Особенно это касается старых версий браузеров.
Нередко определенные HTML-коды и CSS-стили по-разному воспринимаются и обрабатываются на разных движках, поэтому один и тот же элемент может в одном браузере отображаться и функционировать корректно, а в другом — нет.
3 ответа 3
Давным-давно, в далёком-далёком прошлом десятилетии, когда мобильники были ещё слишком слабые и ничего толком не умели, все веб-сайты (не считая WAP, который отдельная история) делали только для компьютеров. Соответственно, вёрстка была адаптирована под соответствующую ширину экрана в районе тысячи пикселей. Когда начали появляться первые попытки запихнуть что-то полноценное в телефон, браузерам ничего не оставалось делать, кроме как прикручивать масштабирование. Ведь сайтов под мобильники никто тогда ещё не делал (кроме отдельных WAP), а если пытаться упихнуть вёрстку, сделанную под ширину 1024 пикселя, в ширину 128 пикселей (типичная ширина экранов мобильников того времени), то всё разъедется.
Вот так и жили с Opera Mini 4:
Apple решила не мириться с этим, и, чтобы появилась возможность делать сайты не только под компьютеры, но и под мобильники революционный айфон™, для мобильного Safari придумала специальный meta-тег viewport, который управляет этим масштабированием и позволяет его отключить. (точной даты его изобретения найти не удалось) Со временем он стал де-факто стандартом и нынче поддерживается подавляющим большинством мобильных браузеров.
Ради совместимости со старыми сайтами поведение при отсутствующем meta viewport осталось прежним: они масштабируются под примерно 1024 пикселя по ширине (инструменты в моём Chrome отмасштабировали под 980 пикселей).
Инструменты Firefox масштабирование не делают. Почему — не знаю. Может, не посчитали это нужным. Но вот хром по личному опыту показывает картинку очень близкую к той, которая будет на реальных айфонах и айпадах, со всеми масштабированиями, и ему в целом можно верить (разве что высота скачет из-за разного размера адресной строки, но это мелочи). Скриншот с реального айфона (клик для увеличения):
Так как чаще всего современные веб-сайты делают адаптивными и автоматическое масштабирование им не нужно, можно его отключить с помощью вышеупомянутого мета-тега viewport. Чаще всего он имеет примерно такой вид:
Это пихается в head. В данном виде он устанавливает ширину, равную ширине экрана (в CSS-пикселях, но про CSS-пиксели отдельная история) и таким образом отключает масштабирование:
Мета-тег viewport имеет много разных опций, подробнее о которых можно почитать на MDN или прямо у Apple.
Ответ - может. Сегодня при мне открыли сайт кинопоиска, увидел новый фон на главной странице. Только что открыл этот сайт у себя на компе - фон новый, но не тот что был днем на другом компьютере. Как такое может быть?
Один и тот же скрипт отрабатывает по разному на разных компьютерах
Добрый день ! помогите разобраться с очень странной ситуацией: имеется рабочий скрипт на vbs.
Почему в разных браузерах один и тот же шрифт выглядит по разному?
Почему в разных браузерах один и тот же шрифт выглядит по разному? Спасибо.
Один и тот же код работает по-разному
Составила программу, программа работает, выдаёт верное решение: var n,i,j,k,r:integer;.
Один и тот же цвет, но виден по разному
На изображении весь оранжевый имеет код ff6600. Почему в логотипе и в названии визуально.
Ответ - нет. Сайт не имеет доступа к данным компьютера и не может на 100% отличить одно устройство от другого.
А фон на сайте можно менять хоть каждую секунду, от хоста пользователя это не зависит.
позвольте перефразировать вопрос так: вы считаете, что это маловероятно или невозможно (магия не в счет разумеется)?
Я достаточно ясно выразился о том, как считаю.
При желании — почему б и нет. Web-сервер таки получает немало информации от клиента: ip-адрес, название и версию браузера, ОС, печеньки и пр. и пр. Добавим сюда политику проксей. В общем, вполне возможно.
Куда она денется? Какой-то ip-адрес таки будет же. Приватный, не приватный, подставленный провайдером — всё равно что-то там будет. Опознать конкретного человека нельзя, но ситуация с точки зрения сервера таки будет различаться. Ну хоть временем суток.
Какой-то ip-адрес таки будет же. Приватный, не приватный, подставленный провайдером — всё равно что-то там будет.
Вопроса о том, может ли сайт выглядеть индивидуально для каждого устройства, и не было. Вопрос был — с одного компа вот так, а с другого — по-другому.
Ну и ответ был - нет, так как, сайт не может отличить один комп от другого. И от компа не будет зависеть, как выглядит сайт. Угадайка с определенной долей вероятности это уже как повезет.
У меня подобная ситуация реально была в 2007 году.
Мне нужно было просмотреть статистику звонков на сайте билайна.
При просмотре из ИЕ - таблицы не было вообще, при просмотре из Оперы - таблица была, но пустая, при просмотре из Мозилы - таблицы не было (фона таблицы), но были видны данные таблицы. И все это с одной машины, но с разных браузеров.
Да, я понимаю, что имели место быть глюки-лаги оформления страницы на сервере без проработки под разные браузеры - поленились разрабы, и что проработка по стандартам оформления и проработка под конкретный браузер - очень разные вещи (особенно наслышан про особенности ИЕ7, которым я тогда и пользовался), но это не говорит о том, что во всех трех случаях у меня был один и тот же вид Web-страницы.
Отсюда:
1. Юзеры используют разные браузеры.
2. Юзеры используют разные ОСи - разнообразие браузеров возрастает.
3. Можно каждому юзеру показывать свой стиль страницы из набора заранее созданных, на основе определения ОС и браузера юзера.
4. Рандомно подставлять обои, стиль страницы без учета входящих данных пользователя (ОС, браузер). Т.о. разннообразие оформления возрастает еще.
5. Можно редиректить на свои поддомены в зависимости от входящих данных юзера - если, например, юзер использует ОС Ubuntu и браузер Мозилла - ему на этот домен, а если у него Вин7 и ИЕ, то на тот. Т.е. для каждого пользователя вид страницы будет определяться его ОС, браузером и Великим Рандомом на двигане сайта.
6. В конечном итоге данные пользователю можно показывать ровно те же самые, что и другому, но внешний вид страницы будет всегда другим или определяться личными настройками пользователя по его выбору.
NeoMatrix, я вообще считаю, что в плане компьютерных технологий нет никаких ограничений. сделать можно всё. если что-то еще не сделано, то просто у кого-то не было в этом необходимости. а по сабжу, кроме скриптов, хотел добавить еще вариант когда страница грузится с кэша (старый вариант)
Как добиться кроссбраузерности сайта
Предлагаем вам несколько самых действенных способов решения этой задачи:
1. Вендорные префиксы. Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
- нестандартно и прописано для определенного браузера;
- это эксперимент, который еще дорабатывается;
- реализует частичный функционал.
- -moz- применяется в Firefox;
- -ms- применяется в IE и Edge;
- -webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;
- -o- применяется в старых версиях Opera (на платформе Presto).
Код может выглядеть следующим образом:
- -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
- - webkit-flex-wrap — это свойство для версий Chrome с 4 по 28 и версий Safari с 3.1 по 8;
- -ms-flex-wrap — свойство для IE 10.
CSS-свойство flex-wrap определяет, будет ли flex-контейнер расположен в одной строке или в нескольких. Wrap указывает на то, что flex-элементы внутри контейнера в случае переполнения располагаются в несколько горизонтальных рядов. Программист, создающий сайт, разумеется, хочет, чтоб так было во всех браузерах, поэтому использует вендорные префиксы.
2. CSS-hacks. Хаки — это части кода, которые может понять только какой-то конкретный браузер. То есть, если, к примеру, ваш сайт правильно отображается в четырех браузерах, а в остальных есть проблемы с корректностью интерпретации данных, то эту проблему можно решить, отдельно прописав соответствующие хаки для каждого браузера, в котором страницы отображаются неверно.
3. Разделение стилей. Используется для поддержки Internet Explorer. Этот способ предполагает определение браузера и подключение конкретного файла стилей. В IE применяются условные комментарии, которые понимает только Internet Explorer. Другие браузеры воспринимают этот код как простой комментарий.
4. Универсальные элементы. Они одинаково качественно функционируют практически во всех популярных браузерах. Благодаря им исходный код ресурса не выглядит громоздким, а главное, соответствует требованиям браузеров.
На бесплатном онлайн-сервисе caniuse. com вы узнаете, какие теги поддерживаются той или иной версией браузера.
4 ответа 4
Пусть попробует обновить без кэша страницу. Мало-ли, что-то закэшировалось, и теперь "выплывает" подобным эффектом.
Но, в общем - странно. Такое чувство, что часть 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. Это необходимо исправлять;
Объясните, пожалуйста, почему при использовании инструментов по отображению сайта в разных разрешениях, разные браузеры выдают сайт по разному при одном и том же разрешении?
Chrome, как я понял просто масштабирует. То есть мой сайт выглядит таким же и на разрешениях выше.
Mozilla же идёт более сложным путём.
То есть я установил одинаковую ширину экрана в пикселях, но браузеры мне выдают страницу по-разному. В таком случае разработчику приходится создавать медиазапросы отдельно для разных движков браузеров. То есть, по сути. двойную работу выполнять, что, разумеется, не хочется и не нужно.
В общем у меня 2 вопроса к профессионалам:
Как мне сделать так, чтобы страница во всех браузерах по одинаковой логике изменяла отображение при изменении разрешения?
Почему меня обманывают (и обманывают ли?) эти встроенные инструменты браузеров?
@PavelMayorov предположу, имеется в виду лишь ширина. Вёрстку, которая зависит от высоты, делают редко
Мета width=device-width прописана? Если нет, то возможно хром отмасштабировал под 1024 пикселя, надо прописать
Читайте также: