CSS браузер для Android не позволяет прокручивать контент

На моем сайте (www.wetter-goch.de) Я показываю текущую информацию о погоде. для мобильного устройства я добавил атрибут overflow-y css в div-контейнер.CSS браузер для Android не позволяет прокручивать контент

Это работает как шарм на Safari iOS, но на Android сайт не позволяет прокручивать содержимое. кроме того, мое фоновое изображение не масштабируется до размера видового экрана мобильного устройства.

Я создаю фон с помощью следующего CSS

<style> 

html { 
    background: url(<?= DataSource::getCurrentTimeLapsePath() ?>) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

</style>

HTML-Viewport мета-тегов

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

Sidebar-CSS сайта отверстие ...

.leftsidebar { 

    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    overflow:hidden; 
    z-index:-1; 

    width: 280px; 
    height: 100%; 

    padding: 10px; 

    background-color: rgba(255,255,255,0.7); 

    overflow-y: auto; 
}

Связанные информационные запросы

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1000px) { 

    .leftsidebar { 
     width: 100%; 
    } 

    .rightsidebar { 
     display: none; 
    } 

    .radar { 
     display: none; 
    } 

    .statistics { 
     display: none; 
    } 

}

Надеюсь, кто-нибудь может помочь мне в решении этого вопроса.

источник

2015-11-17 Daniel Bocksteger

Что такое HTML-код? Предоставьте html, чтобы определить, что происходит. Вы даже запускаете медиа-запрос? – Ravenous

@Ravenous см. Редактируемый вопрос, надеюсь, что это поможет :) –

Чтобы использовать указанный тип носителя, вам нужно запросить страницу, чтобы определить загружаемую таблицу стилей. Вам нужно будет добавить атрибут мультимедиа в таблицу стилей, которая предназначена для мобильных устройств «handheld». Затем он загрузит правильный лист на Android.

<head> <link rel="stylesheet"type="text/css" href="theme.css"> <link rel="stylesheet"type="text/css" href="print.css"media="handheld"> </head>

источник

2015-11-17 21:32:37 Ravenous

Итак, мне нужно было бы управлять несколькими таблицами стилей? но почему это работает на iOS, но не на Android? –

Тег viewets mets управляет размером страницы для iOS. и iOS сильно полагается на метатег viewport, чтобы сделать страницу правильной для этих экранов. Android не использует окно просмотра, если оно не завершено в реальном приложении. – Ravenous

Это действительно странно ... есть ли другой способ из-за нескольких файлов? –

CSS браузер для Android не позволяет прокручивать контент

ответ

Смежные вопросы