Как с имитировать отображение сайта как на планшете?

Question

[Анатолий]

На ПК и телефоне, сайт отображается нормально. На планшете некоторые поля отображаются меньше, чем другие.

Как проверял: в хроме переключался в режим мобильного устройства (Ctrl+Shift+M) и медленно изменял ширину экрана.

На планшете стоит мобильный хром и edge (кеш сбрасывал и проверял, что он сброшен).

Вопрос, почему не могу с имитировать планшет на ПК в хроме? Что-то можно сделать?

Upd.
Версия браузера Chrome 83.0.4103.106
Android 7.1.2
Планшет: SM-T705

Comments

[approximate solution]

В таких случаях обычно скидывают сайт. Так как что Вам могут сказать тут, гадать как Ванги в попытке решить проблему с Вашими полями?

[Анатолий]

approximate solution, причем тут сайт, мне не нужно решение по css.
Мне нужен совет только как имитировать. Какие инструмент обычно используют для проверки отображения сайта на разных устройствах.
Если инструмент только F12, то от совета можно воздержаться, он мне известен.

[WapSter]

Анатолий, уу как все запущено. Ни операционку планшета, ни сайт не дал, даже версию браузера. А мнение собственной правоты зашкаливает. Оставлю решение при себе.

[wyzemind]

Browserstack юзай. Проблемы на планшете вообще обычно начинаются там, где стоит какая-то древняя версия операционки или браузера. Например, flexbox будет плохо работать (если вообще будет) на ios ниже 8-й версии.

[Ankhena]

Анатолий, вы же сами пишете, что при тестировании в сервисах все ровно.

Планшет смысла называть тоже нет, так как у меня там не стоковая прошивка.

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

Если это не кеш, то подключите планшет к компу и смотрите на здоровье, где проблема.
Если почему-то так не сделать, то по-старинке, рамочками и удаляя/возвращая блоки :)

[Анатолий]

Ankhena, браузер стоит последний, тем более проверял двумя.
Чем не устраивает планшет: не удобно, не понятно,...
Так и придется делать - удалить все стили, а потом кусками вставлять.

Вопрос задан, не для решения, а скорее просвещения в вопросе эмуляции.
Вдруг отстал от жизни и F12 не все показывает. ))

[Юрий]

Как вариант — поля указаны в rem, а на планшете в настройках другой дефолтный размер шрифта.

[Анатолий]

Юрий, да, размеры в rem и есть даже em;
У планшета разрешение 2560x1600, но при показе на сайте: 689px (screen.width)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

[Анатолий]

Юрий, потыкал DPR в F12 - не помогло ((
хотя сегодня выбирал iPad (F12) и получал тот же эффект, что на своем планшете, но повторить не удалось.

[Юрий]

Анатолий, если плывут только поля, которые не в пикселях — проблема в размере шрифта по умолчанию.
Если те, что указаны в пикселях, тоже меняются — что-то другое.
В Андроиде размер шрифта в браузерах скорее всего тащится из системных настроек. В Хроме есть ещё пункт в настройках Accessibility — Text scaling. Посмотрите, 100% там установлено или что-то другое.

[Ankhena]

Анатолий,

Вдруг отстал от жизни и F12 не все показывает. ))

F12 никогда не показывал реальное положение дел на устройствах. Это всего лишь эмулятор ширины вьюпорта и dpi.

У планшета разрешение 2560x1600

Это НЕ размер вьюпорта.
Реальный размер можно узнать тут https://www.esolutions.se/en/test

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

[Анатолий]

Ankhena, вот что пишет планшет, если поможет:
Chrome 83.0.4103.106
Engine: WebKit 537.36
OS: Android 7.1.2
Screen Resolution: 689x1102
Browser Window: 689x982

это же я могу и через js посмотреть

[Ankhena]

Анатолий,

вот что пишет планшет, если поможет:

Мне-то это зачем? Вы же сайт не показываете, а варианты действий вам уже все сказали )))))

[Анатолий]

Ankhena, )))
так я тоже понимаю зачем мне эти манипуляции, что они мне дадут

[Анатолий]

Ankhena, нашел интересную ситуацию:

<div>Цена договора: рублей</div>
<div>Цена договора: <input type='text'> рублей</div>
<div>Цена договора: рублей</div>

Если в тексте встречается input то сам input нормальный, а текст в div становится маленьким.
Пробежался по css c запросом input, и не один стиль, где упоминается input, не изменяет font-size, вот такая вот хрень ((

[Ankhena]

Анатолий, начинаю подозревать отсутствие meta viewport
Но дальше играть у в угадалку не вижу смысла.

[Анатолий]

Ankhena, понятно.
Но вьюпорт прописан, смотрите выше в комментариях, я его уже упоминал.

PS. Сайт физически не могу показать, он закрыт извне. Не сам сайт, а поддомен 3-го уровня на котором, я сейчас все это правлю.

[Анатолий]

Ankhena, проблема не решается ((

Закинул сюда: fastfox.ddns.net
Эффект пропадает, как только удаляю:


В планшете вижу так:

[approximate solution]

Анатолий, Теперь объясняйте подробнее - на планшете у вас один из label "Цена договора" становится меньше или другая проблема?
Красной обводкой покажите нужный дефект отображения, который нужно поправить. Скриншот с планшета, либо фотографируйте Ваш планшет, где показан дефект в отображении. Любой скрин с проблемой подойдет.

[Анатолий]

approximate solution, да верно, если в div или другой контейнер добавляю input, то текст в контейнере становится меньше.
Пример:

<div>Цена договора: <input type='text'> рублей</div>

Здесь слова: Цена договора: рублей меньше по размеру, чем те же слова, но без input внутри контейнера.

Красной обводкой покажите нужный дефект отображения, который нужно поправить.

Там 3 строки, проблема в средней строке.

Скриншот с планшета, либо фотографируйте Ваш планшет, где показан дефект в отображении. Любой скрин с проблемой подойдет.

Вы не видите скриншот в сообщении, которое идет перед Вашим сообщением?

[Анатолий]

approximate solution, выше я писал, что в документе есть текст:

<a href="tel:+7499XXXXXX">+7 (499) XXXXXXX</a>
<a href="tel:+7812XXXXXX">+7 (812) XXXXXXX</a>

Если удалить хотя бы 1 строку, то эффект от input пропадает.
Я не понимаю эту связь! А Вы наверное даже ничего странного не видите на странице, вот поэтому я спрашивал про имитацию планшета.
Также не понятно, проблема только на моем планшете или всех.
Если планшет переворачиваю в горизонтальное положение - эффект пропадает.
Удалял media - не помогло!
ХЗ что делать, и делать ли.

[approximate solution]

Анатолий, Совет такой:

<div>Цена договора: <input type='text'> рублей</div>

- это
Перепишите на вот такое -

<div><label class="label-form">Цена договора: <label><input type='text'> рублей</div>

В стилях:

.label-form{
font-size: 18px;
}

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

Попробуйте сделать примером Выше, если проблема исчезла, значит какое-то из свойств Ваших стилей переопределяет шрифт, или ужимает контейнер(допустим отступ который у вас прописан в rem\em у блоков выше, двигает ваш общий контейнер и какой-то элемент прыгает. В целом верстка превращается в магию и танцы с бубном, если сразу туда наваливать кучу говно без семантики, наследования классов и прочих прекрасных вещей.

[Анатолий]

approximate solution, вполне возможно у меня говно код, а может и еще хуже.
Но вопрос именно, в том как найти и решить эту причину.

Добавил на страницу Ваш код, он работает нормально, так как там фиксированный размер. И я не много не понимаю, зачем это, ведь ясно, что это сработает. Кстати, у Вас там слеш пропушен у лейбал, ну да ладно.

если проблема исчезла, значит какое-то из свойств Ваших стилей переопределяет шрифт

Ну так это понятно, в этом и вопрос, из-за чего это все.

[approximate solution]

Ну так это понятно, в этом и вопрос, из-за чего это все.

А вот этот вопрос уже сюда относится -

Вам нужно решение css, у вас говноверстка, искать придется в коде, точечно, смотреть через F12\или эмулятор который Вам кидали в комментариях, из-за чего ползет Ваша верстка. Я бы посоветовал бы не тратить наше и своё время. И просто научиться контролировать css во всех брейкпоинтах. Иначе на стадии продакшена это выстрел в ногу. Добавить классы, забыть на первых порах про em\rem - которые чаще всего используются в комбинации с увеличением шрифтов для слабовидящих, а не пиханием во все дыры. Для этого сойдет и стандартный px.

[Анатолий]

approximate solution, извините конечно, но Ваши комментарии не несут для меня полезной информации.

[approximate solution]

Анатолий, Мне почему-то сразу становится стыдно за людей вроде Вас, которые крутятся в моей профессии. Удачного дня.

[Ankhena]

Анатолий, Я посмотрела код. Воспроизвести проблему у меня пока не получилось.
Для первого теста попробуйте вот что:
уберите font-size: calc(.5vw + 1.5rem);
и задайте для дива и инпута размер шрифта в px и целыми числами.
Для начала одинаковыми, потом разными.
Просто округлите сами те значения, которые получаются сейчас.

И я не заметила ответа на вопрос, проверили ли вы все настройки в браузере, чтобы там стоял масштаб 100% без всяких фокусов для особых потребностей.

[Анатолий]

Ankhena, если установить px, то проблем - нет.
На сайте лишь часть кода, которую я победил:

расширил с html до этого списка

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

но на своем тестовом сайте, это проблему не решило.
Сейчас заряжу планшет и снова попробую отработку гипотез.

И я не заметила ответа на вопрос, проверили ли вы все настройки в браузере, чтобы там стоял масштаб 100% без всяких фокусов для особых потребностей.

я не знаю, как это проверить в мобильной версии, но сам я ничего там не менял

[Ankhena]

Анатолий, на кой черт вы вообще это пишете

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

Шрифт задается для html и/или body, а потом переопределяется для нужных элементов. Инпутам, кнопкам и т.д. пишут inherit для наследования от родителя (если ненужно менять), потому что по умолчанию они этого не делают.

я не знаю, как это проверить в мобильной версии, но сам я ничего там не менял

Зайти в настройки и посмотреть.

И не забывайте менять версию css файла, чтобы не возиться с кэшем на планшете/мобилке.
style.css?v123

[Анатолий]

Ankhena, у меня этого изначально и не было, это было в найденном в Интернете reset.css

style.css?123 не делал, сейчас сделаю
я просто историю каждый раз скидывал, т.е. удалял все файлы в кеше
предварительно сбрасывая кеш на сервере ))

[Анатолий]

Ankhena, оказалось дело не в сайте.


вот что вижу на планшете (Chrome)
(горизонтально)

(вертикально)


Edge (вертикально)


Что можете сказать по этому поводу?

[Ankhena]

Анатолий, Видимо, браузер всеми силами пытается понять логику верстальщика и отобразить пользователю наиболее удобным для него способом.
Пишет ли он что-нибудь по этому поводу в комментариях, можно узнать посмотрев в инструментах разработчика, подключив планшет к компу.

Возможно, у вас включен режим чтения.

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

[Анатолий]

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

Режим чтения не включен, или я просто даже не вижу, где он включается.

На планшете в браузере есть кнопка "Версия для ПК", она изменяет формат показа сайта, но по данному вопросу она не оказывает никакого влияния.

пишите прямо и четко, что он должен делать: семантика и стили.

У меня только 1 вопрос: Почему на планшете отображается не так как на ПК или телефоне.

Подчеркну еще раз, что эта ситуация не зависит от браузер(ов)а и сайт(ов)а везде вижу одно и тоже, т.е. размер-шрифта "пляшет".

Короче я понял, забиваю на этот вопрос, похоже он не решаемый.

Answer 1

[Анатолий]

Была проблема со шрифтами, выяснилось, что дело в планшете.
В планшете стоял шрифт с размером 130% и в итоге были косяки с отображением.
Кроме размера шрифта, в планшете можно увеличить масштаб изображения, в итоге получаем тоже самое, только без косяков.

Написал, чтобы не забыть, может кому-то тоже поможет.

Answer 2

[approximate solution]

https://www.browserstack.com/
И ему подобные сервисы, которые легко гуглятся.

Comments

[Анатолий]

Из бесплатных там только 2 устройства, на обоих устройствах сайт отображается корректно, т.е. проблему я не вижу. А она есть.

[approximate solution]

Анатолий, Что бы Вам тут помогли, кидайте сайт\код. И браузеры в которых у Вас не работает, сейчас вы занимаетесь откровенным словоблудием.
Не один сервис не даст вам стопроцентной гарантии в идеальности тестирования верстки, только ручное тестирование отдельных блоков, на целевом устройстве. Т.е берете планшет - видите косяк, копаетесь в коде и ищите кроссбраузерные решения.

[Анатолий]

approximate solution, я еще раз повторяю, что при тестировании сайта на различных сервисах, сайт отображается корректно. Чего Вы хотите от сайта?

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

Планшет смысла называть тоже нет, так как у меня там не стоковая прошивка.

[approximate solution]

Чего Вы хотите от сайта?

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

[Анатолий]

approximate solution, в комментарии к вопросу, можно посмотреть что и как.