Nano Hash - криптовалюты, майнинг, программирование

Как бутстрап говорит, что это смартфон

Я знаю, как использовать загрузчик, но я хотел бы понять, как он работает. Недавно я попробовал getbootstrap.com на HTC One, размер экрана примерно 1900x1080. На странице отображалась только одна колонка и свернутая навигация.

Но поскольку макет на главной странице использует col-sm-4, он должен переключиться на макет с несколькими столбцами за пределами 768 пикселей.

Каким образом начальная загрузка могла определить, что я использую смартфон?

Изменить: просто случайно снова наткнулся на эту тему. Используя alert(screen.width), вы получаете ширину, которую телефон, кажется, отправляет на сервер, которая меньше фактического размера пикселя. Например. моя Lumia предупреждает о 403 пикселях, хотя технически она имеет 720 пикселов в вертикальном положении.

responsive-design twitter-bootstrap twitter-bootstrap-3
17.03.2014

  • BOotstrap не знает IIRC, но bootstrap знает размер экрана. Ему все равно, смартфон он или нет ;) 17.03.2014
  • Если ему все равно, то он должен отображать 3 столбца, так как есть 1080 пикселей места. Но ведет себя так, как будто бы меньше 768px! 17.03.2014
  • Вероятно, я неправильно понял ваш ответ: что вы называете размером экрана: в пикселях или в сантиметрах? 17.03.2014
  • Пиксель. Насколько мне известно, начальная загрузка идет по размеру носителя - размеру пикселя - и переключается на другой макет, когда разрешение (пиксели) экрана ниже определенного порога. Смартфон это или нет, значения не имеет. Отметьте getbootstrap.com/css/#responsive-utilities — это элемент управления. В основном существует 4 класса устройств, определяемых разрешением по горизонтали. 17.03.2014
  • Судя по этой таблице, разве htc не должен вести себя как среднее устройство? Но на самом деле он ведет себя как очень маленькое устройство. 17.03.2014
  • Да, должно. Я не владею им и не проверяю его, поэтому на это я не могу ответить. Я бы открыл тикет на странице github. Проверьте страницу на наличие тегов Mobile First (getbootstrap.com/css/#overview-doctype). ). 17.03.2014

Ответы:


1

Добавьте это в заголовок HTML..

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

Это сообщает браузерам небольших устройств, как масштабировать страницу. Подробнее об этом можно прочитать здесь: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

17.03.2014

2

Я понимаю вашу проблему, есть и другие способы использования носителя для обнаружения устройства.

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

device-pixel-ratio например.

Вы можете проверить соотношение пикселей устройства, чтобы обнаружить такое устройство.

Другие интересные ссылки: Медиа-запросы и соотношение пикселей устройства

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

17.03.2014

3

Это сработало для меня:

<head>
  <meta name="viewport" content="width=device-width">
</head>

И Bootstrap должен иметь оба варианта меню для переключения, когда используется браузер смартфона или ПК, например:

<nav class="navbar navbar-inverse ng-scope" role="navigation" >
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#not-google-plus-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><b>Objetos Perdidos</b></a>
    </div> <!-- ./navbar-header -->

    <div class="collapse navbar-collapse" id="not-google-plus-nav">
      <ul class="nav navbar-nav pull-right">

          <li><a href="/+admin">+admin</a></li>
          <li><a href="/+admin/settings">Mi Cuenta</a></li>
          <li><a href="/register">Registrar Usuario</a></li>
          <li><a href="javascript:void(0)" ng-click="vm.logout()">Salir</a></li>

      </ul>
    </div> <!-- /.collapse.navbar-collapse -->
  </div> <!-- /.container-fluid -->
</nav>

Кнопка «навигационная панель-переключатель свернута» будет отображаться на смартфонах вместо обычного меню.

10.10.2015

4

Bootstrap использует медиа-запросы. Проверьте разделы @media в файле bootstrap.css.

@media(max-width:767px){--some CSS--}
@media(min-width:768px){--some CSS--}
@media(min-width:992px){--some CSS--}
@media(min-width:1200px){--some CSS--}

Вот раздел документации, объясняющий то же самое. Кроме того, вот ссылка (MDN), которая Я бы порекомендовал, если вы хотите использовать медиа-запросы.

17.03.2014

5

Это не. Отзывчивый дизайн BOotstrap основан на горизонтальном разрешении порта рендеринга, а не даже на экране (я получаю такое же поведение, когда уменьшаю размер браузера).

http://getbootstrap.com/css/#responsive-utilities

здесь есть некоторые определения. По сути, это адаптивный дизайн Bootstrap, разделяющий устройства на 4 категории в зависимости от количества доступных пикселей по горизонтали. Ничто не говорит «это телефон», это только ПРЕДПОЛАГАЕТ, что это телефон, если разрешение ниже 768 пикселей.

17.03.2014
  • Я делаю еще одну попытку: htc НЕ ниже 768, он выше!!!!! Но он ведет себя так, как будто он БУДЕТ меньше 768. Поэтому в моей логике должно быть что-то еще, что говорит css НЕ использовать то, что находится внутри @media (min-width: 768px) {} 17.03.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..