Как я могу сделать HTML-страницу, которая отлично работает в веб и мобильных приложениях

Question

Как я могу сделать HTML-страницу, которая отлично работает в веб и мобильных приложениях

0

Я создаю html-страницы, которые могут иметь текст, изображения, видео, facebook как кнопки и т.д. Я использую CKeditor для создания страниц. Я храню этот html в базе данных, а затем получаю доступ к нему для веб-и мобильных приложений.

Он отлично работает для Интернета, но не для приложений. Иногда проблемы с видео, картинками, шириной, высотой и т.д. Также не очень хороши для приложений. Если я исправлю вещи для мобильных приложений, тогда веб-беспокоиться. HTML5 поддерживает мобильную среду, но как я могу получить один html для всех сред?

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

Jerry3456 25 окт. 2013, в 12:54

Источник

0

использовать jquerymobile
shemy 25 окт. 2013, в 10:48

Теги:

html

html5

responsive-design

3 ответа

2

Вам нужно использовать Media-запросы, просмотреть тег порта

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

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

Метатег в заголовке

<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"/>

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

user2381689 25 окт. 2013, в 08:39

0

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

например, сделайте себе таблицу стилей CSS, а затем используйте медиа-запросы, чтобы определить разные стили для использования с окнами браузера разных размеров. Затем в представлении "source" кода ckeditor присваивает ваш html-текст другим идентификаторам или классам таким образом, что затем они берут стиль из таблицы стилей для использования с разными размерами экрана.

Таким образом, вы можете сказать что-то вроде: для разрешения экрана с разрешением 1024 пикселя или выше текст на 25 пикселей и т.д. И т.д. Для экрана размером 600 пикселей или менее текста на 12 пикселей и т.д. Вы также можете использовать этот метод для повторной настройки макета для различные экраны.

Smokescreen 25 окт. 2013, в 08:26

Ещё вопросы

Joel Murphy · Accepted Answer · 2013-10-25T08-38-00.000Z

Вы можете использовать медиа-запросы CSS3, как предлагал @Smokescreen.

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

<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css" />

Или с встроенным CSS:

@media screen and (max-device-width: 480px) {
  .button {
    background: #000;
  }
}

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

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