2010-09-29 9 views
0

Je travaille sur une application web mobile et j'ai remarqué sur mes deux téléphones de test, qui sont BlackBerry 9700 Bold (OS 5.0) et BlackBerry Tour 9630 (OS 4.7) ne rend pas la largeur correctement.BlackBerry web app - 100% de largeur ne remplit pas l'écran

J'ai une table simple que j'ai déclarée être la largeur 100%, mais la table ne se développe pas et occupe 100% de l'écran. Il y a une bordure de gouttière/blanc de 10px ou plus à droite de l'écran. Si je code dur la largeur à 480px, alors il occupe tout l'écran, mais je ne veux pas de valeurs de largeur de code, car elles peuvent être différentes selon le BlackBerry utilisé par l'utilisateur. J'utilise cette balise meta: <meta name="HandheldFriendly" content="true" /> et expérimenté avec la définition de la méta-balise viewport avec peu de succès.

Des idées? Je réalise que je pourrais définir la largeur dynamiquement en utilisant JavaScript, mais je préfère ne pas. De plus, si je sauvegarde la page en HTML et que je télécharge ce HTML sur le serveur, alors quand je navigue sur cette page depuis le BlackBerry, la largeur est de 100%! C'est bizarre étant donné que c'est le même code. Peut-être que quelque chose ne va pas quand la page est créée dynamiquement et que la largeur est corrompue.

Quelqu'un d'autre vit quelque chose comme ça?

+0

Ug, j'ai aussi ce problème. L'avez-vous déjà résolu? Personne n'a proposé de solution pour cette question. – Sherri

Répondre

0

Je viens de résoudre ce problème pour mon projet. J'ai ajouté un min-width: 470px aux divs qui ne remplissaient pas la largeur complète de BlackBerry, et il l'a corrigé.

+0

Merci Sherri, j'ai fini par devoir utiliser une largeur fixe comme tu le décris, mais ça n'a pas complètement résolu mon problème. Merci! – scottystang

1

j'ai réussi à se débarrasser de l'espace de gouttière en ajoutant dans mon CSS:

body 
{ 
    margin: 0px; 
} 
0

J'ai résolu ce problème grâce à la fenêtre méta comme ça:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0;" /> 

Après cette simple "body {width: 100%}" fonctionne bien!

Et c'est compatible avec d'autres téléphones.

Questions connexes