Ответ 1

Это называется Отзывчивая веб-разработка (RWD). Чтобы сделать страницу восприимчивой ко всему устройству, нам нужно использовать некоторые основные фундаментальные элементы, такие как: -

1. Установите метатег просмотра в голове:

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

2. Используйте медиа-запросы.

Пример: -

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

3. Или мы можем напрямую использовать RWD framework: -

• Bootstrap
• Фонд 3 и т.д.

Некоторые из хороших статей

Запросы к мультимедиа для стандартных устройств - ПО КРИСУ КРИСТА

CSS Media Dimensions

4. Более крупные устройства, средние устройства и мультимедийные запросы Small Devices. (Работайте в моих сценариях.)

Ниже медиа-запросов общего типа Тип устройства: - Расширенное устройство, средние устройства и небольшие устройства. Это просто базовые типы мультимедиа, которые работают для всего сценария и с легкостью обрабатывают код вместо использования различных медиа-запросов, просто должны заботиться о трех типах мультимедиа.

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}

Ответ 2

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

Как и многие другие, вы сначала должны убедиться, что вы устанавливаете метатег viewport, чтобы заставить мобильные устройства использовать свой "идеальный" видовой экран вместо эмулируемого окна просмотра "ширина рабочего стола". Самый простой и надежный вариант этого тега выглядит следующим образом:

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

Источник: ППК, вероятно, ведущий эксперт по работе этого материала. (См. http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf).

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

Теперь, когда у нас есть правильный (не поддельный) мобильный видовое окно для работы, настройка высоты окна просмотра по-прежнему сложна. Как правило, веб-страницы могут расширяться вертикально, но не горизонтально. Поэтому, когда вы устанавливаете height: 100% на что-то, это измерение должно быть связано с чем-то другим. На верхнем уровне это размер элемента HTML. Но когда элемент HTML выше экрана (и расширяется, чтобы содержать содержимое), ваши измерения в процентах будут испорчены.

Введите элемент vh: он работает как проценты, но работает по отношению к окну просмотра, а не к содержащему блоку. Информационная страница MDN здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

Использование этого устройства работает так, как вы ожидали:

.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */

Он работает на многих браузерах (IE9 и выше, современные Firefox, Safari, Chrome, Opera и т.д.), но не все (поддержка здесь: http://caniuse.com/#search=vh). Недостаток в браузерах, где он работает, заключается в том, что в iOS6-7 имеется массивная ошибка, которая делает эту технику непригодной для этого самого случая (подробности здесь: https://github.com/scottjehl/Device-Bugs/issues/36). Однако он будет исправлен в iOS8.

В зависимости от структуры HTML вашего проекта вы можете избежать использования height: 100% для каждого элемента, который должен быть как высок, чем экран, если выполняются следующие условия:

• Элемент является прямым дочерним элементом <body>.
• Оба элемента html и body имеют 100% установленную высоту.

Я использовал эту технику в прошлом, но это было давно, и я не уверен, что она работает на большинстве мобильных устройств. Попробуйте и посмотрите.

Следующий выбор - использовать помощник JavaScript для изменения размеров ваших элементов в соответствии с окном просмотра. Либо polyfill устраняет проблемы vh, либо что-то еще. К сожалению, не каждый макет выполнен в CSS.

Ответ 3

Вы можете использовать высоту видового экрана, просто установите высоту вашего div на height:100vh;, это установит высоту вашего div на высоту окна просмотра устройства, кроме того, если вы хотите, чтобы это было точно так же, как и на экране вашего устройства, установите для поля и заполнения значение 0.

Плюс, будет полезно установить метатег viewport:

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

Обратите внимание, что это относительно новое и не поддерживается в IE8-, посмотрите на список поддержки, прежде чем рассматривать этот подход (http://caniuse.com/#search=viewport).

Надеюсь, что это поможет.

Ответ 4

У меня мало времени, и ваш jsfidle не работал прямо сейчас.
Но, возможно, это поможет вам начать работу.

Прежде всего, вы должны избегать добавления css в свои html-теги. Как align="center".
Поместите вещи так, как это в ваш css, поскольку он намного яснее и не будет быстро осуждать это.

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

Пример css:

@media screen and (min-width: 100px) and (max-width: 199px)
{
    .button
    {
        width: 25px;
    }
}

@media screen and (min-width: 200px) and (max-width: 299px)
{
    .button
    {
        width: 50px;
    }
}

Вы можете использовать любой CSS-запрос внутри медиа-запроса.
http://www.w3.org/TR/css3-mediaqueries/

Ответ 5

Fiddle

Вы хотите установить высоту, которая может быть установлена ​​для всех устройств?

Решите дизайн сайта i.e Высота на разных устройствах.

Пример:

• Height-100px для пузырьков на устройстве с -min-width: 700px.
• Height-50px для пузырьков на устройстве с < 700px;

У вашего css, который имеет высоту 50 пикселей,

и добавьте этот медиа-запрос

  @media only screen and (min-width: 700px) {
    /* Styles */
    .bubble {
        height: 100px;
        margin: 20px;
    }
    .bubble:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble1 {
        height: 100px;
        margin: 20px;
    }
    .bubble1:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble1:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble2 {
        height: 100px;
        margin: 20px;
    }
    .bubble2:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble2:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
}

Это приведет к тому, что ваши пузырьки будут иметь высоту 100 пикселей на устройствах размером более 700 пикселей и марке 20 пикселей;

Ответ 6

Я использую что-то вроде этого в документе document.ready

var height = $(window).height();//gets height from device
var width = $(window).width(); //gets width from device

$("#container").width(width+"px");
$("#container").height(height+"px");

Ответ 7

Пока я искал свой ответ по тому же вопросу, я нашел это:

<img src="img.png" style=max-
width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">

Вы можете использовать его внутри тега (iframe или img), которое будет отрегулировано на основе этого устройства.

Ответ 8

Попробуйте дать вашим divs ширину 100%.

Ответ 9

Простой:

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

Ура!