Макет размытого / низкого качества, когда jQuery mobile на Android-телефоне с использованием телефонной затычки

Я использую phonegap и jQuery mobile для разработки приложения для Android. В браузере страницы выглядят отлично, но когда я запускаю приложение на устройстве (= в веб-просмотре), страницы выглядят дешево и … отключены. Почти как если бы страница была увеличена на 101% или что-то в этом роде. Кто-нибудь еще сталкивается с этой проблемой? Есть идеи, как это исправить?

Вы пытались добавить значение target-densitydpi=device-dpi в метатег viewport в </head> страницы следующим образом:

 <head> <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" /> ... </head> 

Это должно делать свое дело; Я надеюсь, что это помогает!

На самом деле люди, настоящие исправления без каких-либо побочных эффектов размера шрифта, обращаются к текстовой тени CSS следующим образом.

 * { text-shadow:0 0 0 transparent; text-shadow:none; } 

Это гарантирует, что ваш шрифт не имеет тени, поэтому текст выглядит размытым. Если вы посмотрите внимательно, вы можете видеть, что текст на самом деле не размыт, но имеет тень того же цвета.

На форуме jQuery также было предложено добавить user-scalable=0 к постоянно растущему метатегу. Поэтому в конце концов он выглядит примерно так:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi, user-scalable=0"> 

Этот fixit работал для меня. Хотя сообщение jQuery forum также предполагало, что окончательная работа может состоять в том, чтобы включить некоторые специфические для Android css:

 - if is_android? %link{:rel => 'stylesheet', :type => 'text/css', :href => '/stylesheets/mobile/android.css'}/ 

У меня также такая же проблема при тестировании на мобильном устройстве. Но обратитесь к этой ссылке :

Блок «px» CSS может отличаться от фактических пикселей устройства, так как браузер «масштабирует» изображения и шрифты в большем размере, чем вы просили. (В браузере, естественно, предполагается, что вы действительно не имели в виду «пиксели», когда вы сказали «px», и с помощью этой помощи старается изменить размер вашего контента, чтобы сделать его доступным для чтения на экранах телефонов с высоким разрешением.)

Затем я изменил свой TARGET-DENSITYDPI на «target-densitydpi = 150», и он работает правильно (протестирован на NEXUS 10).

Попробуйте поместить пустой символ "" в тот же скин ваш образ, я не знаю точно, но он работает для меня.

Webkit использует «пиксели css», который затем перевычисляется до разрешения физического устройства – возможно, это проблема.

Если у вас есть обычный 4-дюймовый мобильный телефон с экраном 480×800, пиксели css могут быть 320×533, а соотношение пикселей в CSS – 1,5.

В этом случае изображение 32 x 32px должно иметь как минимум 48 x 48 пикселей, чтобы выглядеть хорошо и резко. Поскольку у некоторых устройств соотношение пикселей 2 (iPhone 4/5), я обычно использую 2x большие изображения, и они выглядят очень хорошо, почти так же хорошо, как svg-изображения (и нет проблем с шириной более старых браузеров).

Для этого вам необходимо запомнить размер изображения

 background:url('myimage64.png'); background-size:32px 32px; 

или

 <img src='myimage64.png' width='32' height='32'>