Jump to content
  • Sign Up
  • 0

VovkaKrut
 Share

Question

при просмотре кода страницы сайта в браузере с использованием "инструментов разработчика" (горячая клавиша F12 для Windows) и просмотре его отображения для мобильных устройств, размер экрана которых меньше размера страницы сайта и ее отдельных элементов, ширина которых задана в пикселях, а не в процентах, страница без предварительной адаптации вписывается в размер экрана любого устройства. Как изменить отображение чтобы увидеть реальную картину, что нужно изменить в коде для создания адаптированного сайта??? 

Без имени.jpg

для изменения размера страницы под размер устройства при отладке необходимо в код вставить метатег "viewport"

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

У меня снова вопрос: получается, до этого сайт будет отображаться на устройстве нормально??? то есть без метатега "viewport" он же вмещался в размер экрана мобильных устройств в инструменте разработчика в браузере!!!

 

Разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. <meta name="viewport" content="width=device-width> 

В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.

Вот так и докопались до истины. Буду рад если кому-нибудь это поможет

 

Edited by VovkaKrut
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • Grig2020
      By Grig2020
      В Опере страница с фото (вкладка "Картинки") постоянно подпрыгивает, дергается, будто сама себя настраивает. Все обновления актуальны. Что делать? Есть видео.
      Браузер: 66.0.3515.44, Используется обновленная версия Opera, Канал обновлений: Stable, Система:Windows 7 32-bit.
      V_20200129_142114.mp4
    • Talomir
      By Talomir
      АУДИО-БРАУЗЕР С СИНТЕЗОМ РЕПОРТАЖЕЙ
      Аудио-браузер и синтезатор репортажей Репортёр 007 позволяет просто вбить ключевые слова или поисковую фразу и начать слушать, веб-сайты как радиостанции с репортажами по запрашиваемой теме. Он сам делает поиск в интернете, озвучивает первые 100 сайтов по очереди, но вы можете перематывать воспроизведение взад и вперёд, останавливать на перерыв, перематывать в начало. Сайты в аварийном состоянии автоматически пропускаются.
      Репотёр 007 поддерживает запросы и сайты на русском и английском языках, определяя язык, что позволяет слушать сайты и на английском языке - если вам нужна практика в иностранном перед собеседованием или перед трудоустройством в компанию с требованиями к английскому языку.
      Репотёр 007 позволяет получать ответы на интересующие вопросы, например поднимут ли зарплату госслужащим в этом году, слушать новости по интересующей теме, быстро обучаться за несколько дней в основных направлениях предметной области, например - биоуправления или биоэлектрического управления, магнитной стимуляции мозга, нейростимуляции и нейромодуляции, идеологии кибер-безопасности и так далее. Он также позволяет, например, послушать рассказы или сказки для засыпания, сказки для взрослых или-же, вы можете сделать запрос сказок и оставить компьютер рассказывать сказки вашему маленькому ребёнку.
      Репотёр 007 подходит школьникам средних и старших классов для образования, студентам и аспирантам для расширения кругозора, работающим для автоматического чтения новостей и ответов на вопросы, и, также, родителям маленьких детей для автоматического нахождения сказок по словам и развлечения ребёнка - говорящий компьютер с репотёр 007 избавит вас от этой рутины.
      Программа позволяет и создавать простые аудио-репортажи по актуальным источникам. До второй версии в ней нет модуля автоматического рерайтинга материалов, но она позволяет писать звук веб-страниц и статей в файлы, что можно использовать для быстрого наполнения своего веб-сайта. Аудио-материал, полученный по интернет-статье, является своего рода рерайтом - подачей материала в другой форме, озвученной синтезатором речи.
      Для записи звука статьи в файл надо остановить программу, нажав "Стоп", кликнуть галочку "Звук" и кликнуть на правой панели сайт, статью с которого надо озвучить и которую вы перед эти проверили кликом и прослушиванием. Репотёр 007 автоматически создаст и файл со звуком на рабочем столе, продублировав произношение статьи в звуковой файл. Полученный формат WAV звукового файла можно без труда сконвертировать в MP3 онлайн! Не забудьте снять галочку "звук" перед пробой следующего материала. Включение записи автоматически создаёт новый звуковой файл на десктопе, с именем, построенным по словам запроса.
      Аудио-браузер Репотёр 007 основан на браузерном компоненте Chrome, синтезаторе речи от Microsoft, веб-поиске от DuckDuckGo и компонентах интерфейса Microsoft Visual Studio, за что автор приносит благодарности и уважение фирмам-производителям: мне осталось лишь собрать всё воедино и соединить компоненты! Программа абсолютно бесплатна для пользователей, работает под русской Windows 10.
      Качайте с сайта Технологии Боттинга 12 (гугл) или по этой ссылке

    • Колхозник деревенский
      By Колхозник деревенский
      Читаю статью на этом сайте http://taligarsiel.com/Projects/howbrowserswork1.htm
      И возник вопрос:

      Там где заголовок с названием The browser's high level structure есть картинка.

       
      Что означают эти стрелки ?
    • azkabeyn
      By azkabeyn
      Здравствуйте уважаемые форумчане. Проблема заключается в не переносе текста на след строку в браузере хром. в остальных переносится нормально. Что нужно добавить в свойства <h1>, чтобы все отображалось корректно?
      http://auto-rentgarant.com.ua/ru/catalog  //  пациент, 
      .products ul li .info {    position: absolute;    left: 300px;    top:0px;    font-size: 12px;}.products ul li .info h1 {                    //кусок подозреваемого кода    margin: 13px 0 5px 0;    padding: 0;    font-size: 14px;}.products ul li .info h1 a {    color: #000;    text-decoration: none;}.products ul li .info h1 a:hover {    text-decoration: underline;}  https://yadi.sk/i/Zd8OeKy-ekwp8  - не правильно
      https://yadi.sk/i/1yvSXvzFekwq3  - правильно
    • SKSKSS2013
      By SKSKSS2013
      Что бы не сильно напрягал зрение, да и красивый был. 
  • Обсуждения

    • Алеся
      Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует.   https://alesia-k.github.io/Tajam-template/ Обратите, пожалуйста, внимание на: - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить? - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было. - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a>   не идет процесса соединения. Заранее спасибо!
    • klierik
      Попробуйте убрать стиль: html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay { /* overflow: hidden; */ } в файле "pum-site-styles.css?generated=1634785690&ver=1.16.2"
    • Liv0n
      Прошу прощения!! Акроми
    • klierik
      По одному лишь скриншоту сказать сложно
    • Liv0n
      Доброго времени суток. Возникло 4 проблемы, 2 из них решилось при включении внутренних функций отладки плагина. Уже сломал голову выискивая в 1 случае нужный css. 1. При нажатии оставить заявку или на блок в *Наши услуги* появляется черная рамка в окошке (на скрине видно), причем, появляется она рандомно, иногда с 1 раза иногда с 10... При нажатии в окошко она исчезает. 2. Всего на сайте 4 окна, всё в них одинаковое, настройки и шорт код контактной формы, разница только в логотипе и номере. Проблема: При открытии окна *Оставить заявку* страница мотается вверх и открывается окно, при закрытии отматывается обратно на ту часть, где было нажатие кнопки (Хотя отмотки страницы вообще не должно быть, нажал окно просто открылось). Так же есть кликабельные блоки в разделе *Наши услуги*, при нажатии они так же отматывают страницу вверх, а при закрытии не возвращается вниз. С данной проблемой (скорей всего проблема в совместимости скриптов, но в скриптах я полный 0) столкнулся в первые в данном плагине. Буду признателен любой помощи.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy