web-dev-qa-db-fra.com

Activer le réel positionnement fixe sur Samsung Android navigateurs

Le Android Browser, puisque 2.2, prend en charge le positionnement fixe, au moins dans certaines circonstances telles que lorsque la mise à l'échelle est désactivée. J'ai un simple fichier HTML sans JS, mais le positionnement fixe sur trois Samsung Les téléphones que j'ai essayés sont tout simplement faux. Au lieu d'un véritable positionnement fixe, les rouleaux de l'en-tête hors de vue se remettent ensuite en place une fois le défilement terminé.

Cela n'arrive pas sur le Android Emulateur SDK pour toute configuration que j'ai testée (2.2, 2.3, 2.3 x86, 4.0.4). Cela ne se produit pas non plus lorsque vous utilisez WEBVIEW Une application sur les téléphones Samsung: Dans ces cas, le positionnement fonctionne comme prévu.

Y a-t-il un moyen de faire le samsung Android "stock" "stocker" utiliser un positionnement fixe réel?

J'ai testé: 1. Samsung Galaxy 551, Android 2.2 2. Samsung Galaxy S, Android 2.3 3. Samsung Galaxy S II, Android 2.3

Exemple de code:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height"> 
    <style>
    h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
    p { margin-top: 36px; }
    </style>
  </head>
  <body>
    <h1>Header</h1>
    <p>Long text goes here</p>
  </body>
</html>

Le comportement attendu est que l'en-tête gris remplit le haut de l'écran et reste mis, peu importe combien vous faites défiler. Sur Samsung Android navigateurs Il semble faire défiler hors de la vue, puis sur Poster en place une fois que le défilement est effectué, comme si le positionnement fixe est simulé à l'aide de JavaScript, ce qui n'est pas.

éditer Jugement par les commentaires et les "réponses" Il semble que je n'étais peut-être pas clair sur ce dont j'ai besoin. Je cherche une balise méta ou une bascule CSS/Hack ou JavaScript, qui désactive le positionnement fixe de Samsung cassé et active le Android Le positionnement fixe du navigateur. Je ne cherche pas un JavaScript Solution qui ajoute un positionnement corrigé brisé à un navigateur qui n'a aucun support; le positionnement fixe Samsung a déjà l'air stupide.

androidcsswebkitcss-positionsamsung-mobile
25
Mr. Shiny and New 安宇

Je pense que la meilleure façon pour Android 2.2 Navigateur Implémentez JavaScript.

Vous pouvez trouver plus d'informations via ce lien. Il s'agit de positionnement fixe dans tous les navigateurs mobiles.

http://bradfrostweb.com/blog/mobile/fixed-Position/

1
Daniel Ta

Peut-être que vous pourriez envisager une approche différente qui ne nécessite pas de positionnement fixe ...

Ajoutez défiler à l'élément de paragraphe au lieu de l'élément corporel (par défaut). Vous pouvez ensuite positionner l'élément de paragraphe juste sous l'en-tête. Cela garantira que l'en-tête s'affiche toujours en haut de la page, vous permettant de faire défiler le texte dans le paragraphe.

h1 {
   height: 20px;
}

p {
  position: absolute;
  top: 20px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
}
1
Anita Foley

Dans son commentaire à l'article de Brad Frost's Matthew Holloway suggère une solution dans les lignes de la réponse d'Anita Foley, mais avec un polyfill pour débordement: auto, où n'est pas pris en charge. Vérifiez le ici:

http://bradfrostweb.com/blog/mobile/fixed-Position/

0
emik