Я создаю html-страницы, которые могут иметь текст, изображения, видео, facebook как кнопки и т.д. Я использую CKeditor для создания страниц. Я храню этот html в базе данных, а затем получаю доступ к нему для веб-и мобильных приложений.
Он отлично работает для Интернета, но не для приложений. Иногда проблемы с видео, картинками, шириной, высотой и т.д. Также не очень хороши для приложений. Если я исправлю вещи для мобильных приложений, тогда веб-беспокоиться. HTML5 поддерживает мобильную среду, но как я могу получить один html для всех сред?
Я не хочу создавать отдельный html для всех сред, я хочу создать один html, и он должен работать для всех сред. Любой может предложить лучшее решение?
Вы можете использовать медиа-запросы 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. Этот вариант может показаться немного верхним, но вы были бы удивлены, насколько быстро вы сможете создавать приличные веб-сайты с бутстрапом, которые полностью отвечают требованиям.
Вам нужно использовать 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 для просмотра в Интернете, например, маржи, отступы и т.д.
Можете ли вы добавить CSS для его по-разному в зависимости от размера экрана устройства, открывающего страницу.
например, сделайте себе таблицу стилей CSS, а затем используйте медиа-запросы, чтобы определить разные стили для использования с окнами браузера разных размеров. Затем в представлении "source" кода ckeditor присваивает ваш html-текст другим идентификаторам или классам таким образом, что затем они берут стиль из таблицы стилей для использования с разными размерами экрана.
Таким образом, вы можете сказать что-то вроде: для разрешения экрана с разрешением 1024 пикселя или выше текст на 25 пикселей и т.д. И т.д. Для экрана размером 600 пикселей или менее текста на 12 пикселей и т.д. Вы также можете использовать этот метод для повторной настройки макета для различные экраны.