Позиція CSS: фіксовані причини розмитих зображень у браузерах Android

Ніхто так і не відповів на це подібне питання,

Розмиті зображення на веб-сайті Android

Тому я збираюся опублікувати мою власну версію, що стосується моєї ситуації.

Проблема полягає в тому, що position: fixed призводить до розмивання деяких елементів зображення в деяких браузерах Android. У моєму випадку, це викликає фондовий браузер Galaxy Note v1 під управлінням Android 4.0, щоб випробувати цю проблему. Інші сказали те ж саме для деяких Galaxy S3. Ось мій код:

Preview @ http://jl.evermight.net/blurryposition/

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
    </head>
    <body>
        <div id="top-nav-container"
        style="
        display:block;
        top:0px; 
        position:fixed;
        width:100%; height:5.2rem;
        ">
            
        </div>


    </body>
</html>

Ви помітите, що логотип OPTIX Testing спочатку розмитий. Якщо ви видалите position: fixed з конфігурації # top-nav-контейнера , то логотип буде чітким та чітким. Отже, моє запитання: як зберегти як position: fixed , так і чіткий логотип?

На моєму справжньому веб-сайті головна навігація повинна залишатися фіксованою під час прокручування сайту. Я намагався використовувати position: absolute та використовувати javascript, щоб змінити розташування верхньої навігації за прокручуванням, але це спричинило цілий набір ефектів стрибка/мерехтіння. Отже, якщо я не можу використати position: fixed або position: absolute , щоб виправити верхню навігацію у верхній частині мобільного веб-браузера, які мої інші варіанти? Як інші веб-сайти для мобільних пристроїв досягають цього результату?

Додаткова інформація:

Я зробив ще кілька експериментів із зображенням зміни розміру, змінюючи порт перегляду та змінюючи позицію: fixed/absolute, і додавши деякі цікаві результати. Дивись нижче:

  • position:fixed no-background-size with-viewport - fuzzy
  • position:fixed no-background-size without-viewport - crisp
  • position:fixed background-size:20% with-viewport - fuzzy
  • position:fixed background-size:20% without-viewport - fuzzy

  • position:absolute no-background-size with-viewport - fuzzy

  • position:absolute no-background-size without-viewport - crisp
  • position:absolute background-size:20% with-viewport - crisp
  • position:absolute background-size:20% without-viewport - crisp

Ось як прочитати цю таблицю:

  • Перший стовпець визначає, чи використовує # top-nav-контейнер позицію: фіксована або позиція: абсолютний

  • Другий стовпець стверджує, що якщо я використав фонового розміру: 20% або я пропустив його

  • Третій стовпець
  • вказує, включив тег <meta viewport> в голову

  • Четвертий стовпець визначає, чи є логотип перевірки optix нечітким або чітким.

Поглянувши на результати, ви можете побачити, що єдиний раз, коли ви отримаєте чітке зображення з контейнером, що має позицію: фіксовано, коли зображення не розтягнуто або не стискується за допомогою фонового розміру або з портом перегляду. Крім того, єдиний раз, коли ви отримуєте нечіткий образ з контейнером, який має позицію: абсолютний - коли зображення розтягнуто за допомогою фонового розміру та з виглядовим екраном.

11

8 Відповіді

Використання позиції fixed: залишається поганою ідеєю на мобільних пристроях. Переважна більшість веб-сайтів повертаються до статичного заголовка для перегляду мобільних пристроїв (тобто немає плаваючого навігатора).

Нещодавно я зіткнувся з подібними проблемами, як це показано в це питання .

Кілька ресурсів для вас:

1
додано
<div style="position:fixed;"></div>
<div style="position:fixed;"></div><!--add it-->

додати "фіксований" елемент до "фіксованого", як і вгору.

1
додано
我 试 了 下 你 的 方法, 可是 為是 不行.
додано Автор lemon郑, джерело
就是 在 фиксированный 元素 后面 紧跟 一个 фіксований 元素, 就 可以 使 图片 不 模糊
додано Автор cieldon, джерело
我 发现 我 在 一个 项目 里 用 这个 方法 可以 不 模糊, 但 不适 用于 其他 的 项目. 但是, 在 其他 的 项目, 找到 找到 了 可以 解决 这个 问题 的 关键 点. 所以 我 想 & zwnj; 我 这个 解决 方案不 通用
додано Автор cieldon, джерело

add   inside top-nav-container.

<div id="top-nav-container"
    style="
    display:block;
    top:0px; 
    position:fixed;
    width:100%; height:5.2rem;
    ">
        
         
    </div>

I got this problem too when creating fixed action bar with div using background-image as icon. But when I add Text in that action bar, that background-image become crisp. So I just add   as replacement for Text if I don't want any Text on my action bar.

Вибач за мою погану англійську: D

1
додано

add   inside top-nav-container.

<div id="top-nav-container"
    style="
    display:block;
    top:0px; 
    position:fixed;
    width:100%; height:5.2rem;
    ">
        
         
    </div>

I got this problem too when creating fixed action bar with div using background-image as icon. But when I add Text in that action bar, that background-image become crisp. So I just add   as replacement for Text if I don't want any Text on my action bar.

Вибач за мою погану англійську: D

1
додано

спробуйте це:

img {
  transform: scale(1) rotate(0) translate3d(0,0,0);
}
0
додано

спробуйте це:

img {
  transform: scale(1) rotate(0) translate3d(0,0,0);
}
0
додано

спробуйте це:

img {
  transform: scale(1) rotate(0) translate3d(0,0,0);
}
0
додано

Замість user-scalable = no змініть його на user-scalable = 0 .

0
додано
що не мав ефекту
додано Автор John, джерело
android_jobs_ua
android_jobs_ua
120 учасників

Публикуем вакансии и запросы на поиск работы по направлению Android. Здесь всё: full-time, part-time, remote и разовые подработки.

Mobile Dev Jobs UA
Mobile Dev Jobs UA
20 учасників

Публикуем вакансии и запросы на поиск работы по направлению iOS, Android, Xamarin, RN и т.д.