Заголовок Themeroller и Phonegap

Я разрабатываю Android-приложение в HTML с помощью PhoneGap.

Я сделал свою собственную тему приложения с Themeroller

Тема прекрасно отображается в IE и Chrome, но не в моем мобильном. Созданная мной тема Themeroller заменяется стандартной темой. Я не единственный, и у многих других была такая же проблема, смотрите здесь. Однако, читая решения, я не смог создать никаких собственных решений.

Я хотел бы помочь переписать мой код.

Это мой код

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/themes/Jakt.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

Заранее спасибо.

Источник

2 ответа

Решение

Вот код, который является решением моей проблемы:

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/jakt.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="jquery.mobile.structure-1.4.3.min.css" /> 
  <script src="jquery-1.11.1.js"></script> 
  <script src="jquery.mobile-1.4.3.min.js"></script>

Я удалил <meta charset="utf-8" /> поскольку он не будет отображать скандинавские буквы правильно. Я также сделал файлы локальными, хотя приведенный выше код отлично работает с URL.

Источник

При включении jQueryMobile Themeroller вы должны включить файл с базовым css: http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.2.min.css а не стандартным. Этот файл загружается с сайта с вашим собственным CSS:

<!DOCTYPE html>
<html>
<head>

  <title>jQuery Mobile page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script> 

</head>

Ваш код должен быть:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" /> 
<link rel="stylesheet" href="css/themes/Jakt.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
Источник
Другие вопросы по тегам