Redimensionner site de largeur pour s'adapter à l'intérieur de la largeur de l'écran de l'iPad

J'ai un site qui est 2048px de large. Est-il un moyen automatique de l'iPad ajustement de l'ensemble du site de la largeur sur l'écran lorsque le site est chargé? J'ai essayé d'expérimenter avec meta viewport dans quelques différentes façons:

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

Cela n'a pas fonctionné bien. Le site est encore trop large et les déversements hors de l'écran sur l'iPad.

Assurez-vous d'utiliser des virgules pour séparer par exemple width=device-width et maximum-scale=1.0.
Merci. Toujours pas de dés.
Ces fenêtre d'affichage des attributs de dire que Safari permettre responsive design pour le travail, plutôt que de faire un zoom de la page pour permettre à l'ensemble de la largeur pour être visible sur l'écran de l'iPad. Ce qu'ils ne pas faire est de remplacer les styles CSS appliqués à la page - si l'emballage ou le corps ont une largeur fixe, il ne changera pas. Essayez d'utiliser Adobe Edge inspect html.adobe.com/edge/inspect pour voir ce que les styles sont appliqués sur l'iPad. Inclure l'emballage des styles CSS dans votre question si vous le pouvez.
Je veux un zoom de la page pour permettre à l'ensemble de la largeur pour être visible sur l'écran de l'iPad. Comment pourrais-je le réaliser?
Autant que je sache Safari sur iOS va le faire par défaut, sauf si vous avez ces balises meta. L'inconvénient de cette est que par le zoom, les utilisateurs ont souvent de zoom et de défilement pour naviguer dans la page. La largeur de la balise meta remplace ce comportement par défaut pour permettre l'utilisation du Responsive Design (alistapart.com/article/responsive-web-design), où de style CSS spécifiques propriétés sont appliquées sur ou entre les largeurs spécifiques. Une partie de la clé du Responsive Web Design est l'utilisation de pourcentages plutôt que des largeurs fixes, l'adaptation de mise en page à l'aide de règles spécifiques comme la fenêtre est redimensionnée et de contenu les "pauses". Clé, utiliser des pourcentages.

OriginalL'auteur Tim Jahn | 2013-02-15

  1. 7

    Vous pouvez passer à une taille fixe le contenu de la largeur de la sorte:

    <meta name="viewport" content="width=2048" />

    Peut-être besoin de quelques ajustements pour permettre le remplissage de chaque côté, mais doit charger le site de cette taille et de permettre aux utilisateurs de zoomer.

    OriginalL'auteur jjgrainger

  2. 1

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

    C'est ce que j'utilise pour mon site.

    🙁 Ne fonctionne pas pour moi. Même problème se produit toujours.
    Pouvez-vous fournir un exemple vivant? Edit: est ce que ce site de travail sur votre iPad: v1k.org ?
    Ce site fonctionne. Quel est votre site de largeur pour ce site?
    Vous pouvez le vérifier ma source HTML. Je viens d'utiliser le meta code fourni dans ma réponse. Pouvez-vous me donner un lien vers votre site?
    Désolé, malheureusement, ne peut pas car il est protégé site du client.

    OriginalL'auteur Vlad

  3. 1

    La bonne façon de résoudre ce problème en utilisant des pourcentages plutôt que des largeurs fixes. Mais si vous "ne peut pas" changer cela, vous pouvez forcer votre fenêtre à l'échelle vers le bas en utilisant 0.x dans la première échelle comme:

    <meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" />

    OriginalL'auteur steffanjj

  4. 0

    Essayez de définir min-width: 2048px; pour le html et les balises de corps dans le css. C'est la correction de quelques étrangeté de l'ipad pour moi avant, mais vous ne savez pas si il va s'appliquer à celui-ci.

    Pas de dés, malheureusement.
    À moins que ce site web est conçu uniquement pour une utilisation sur grand écran des appareils, cette approche permettra de causer d'importants problèmes d'ergonomie (et beaucoup de défilement) sur les appareils avec des écrans plus petits - notamment mobiles. Envisager de Responsive Web Design (alistapart.com/article/responsive-web-design) pour permettre à votre site de contenu pour s'adapter à différentes tailles de fenêtre de la, ou de l'utilisation d'une largeur de représentant de la plupart des visiteurs de votre site (utiliser quelque chose comme Google Analytics pour le déterminer) si vous devez utiliser une largeur fixe. Forcer une très forte ou de faible largeur pour tous les utilisateurs de fournir une mauvaise expérience utilisateur pour beaucoup.
    Son site la largeur est de 2048... je pense que la convivialité est déjà un problème. Je ne pense pas que le réglage de la largeur de dégénérer les choses. Réactif, c'est toujours une meilleure solution, mais ce n'est pas ce qu'il a demandé.

    OriginalL'auteur Sean

  5. 0

    Je travaillais sur un site avec le même problème récemment, il ne voulait pas rester un zoom entre la page de clics pour un fixe 960px de largeur du site. Essayez:

    <meta name="viewport" content="width=device-width, initial-scale=-100%" />

    C'est très bien, passé sur mon Ipad Air.

    OriginalL'auteur britter

  6. -1

    Cela fonctionne bien:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

    OriginalL'auteur Cubiczx