Comment faire une image en plein écran sur les appareils mobiles, mais pas dans le bureau?

J'ai mis une image de vous informer que mon site est en construction. C'est une image en 800x600 qu'à maintenir la taille d'origine lorsque vous accédez au bureau. C'est la seule chose dans la page.

Je veux le faire rentrer dans la totalité de l'écran lorsque des personnes y accéder à partir de téléphones cellulaires. Comment?

<style type="text/css">
    body { background-color: #6BC5C5; }
</style>
<title>Size is being moved to another server</title>
<div style="margin: 0; padding: 0; left: 0; top: 0; border: 0; position: absolute;">
<img src="movedatacenter.jpg" alt="Under Maintenance" width="595" height="1021" align="left"></div>

OriginalL'auteur Please_Dont_Bully_Me_SO_Lords | 2013-02-15

  1. 8

    Ce que vous voulez utiliser est les media queries. À l'aide d'une requête de média, vous pouvez appliquer différentes règles CSS basé sur la taille de l'écran.

    Par exemple:

    @media only screen and (max-width: 600px) {

    img#underconstruction {width: 100%; height: 100%; margin: 0; padding; 0;}
}

    Qui va les obliger à une img avec l'id de underconstruction aller largeur et de la hauteur si l'écran de l'appareil est 600px ou plus petit. 600 est une bonne taille parce que les nouveaux iphones ont une plus grande hauteur de 480.

    En outre, vous aurez besoin de forcer le port de la vue à un ratio de 1:1 sur les appareils mobiles avec le meta tags:

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
    yep, c'est la meilleure solution, +1
    et si mon image a besoin d'un défilement vertical, puis-je utiliser de la hauteur: *; au lieu de 100% ?
    L'appareil fait défiler verticalement si l'image est trop grande. Je ne sais pas ce que la hauteur:* est.
    c'est la même chose que "height: auto", j'ai testé et il a bien fonctionné. Merci!!!!

    OriginalL'auteur BBagi

  2. 2

    Définir le style de l'image avec le texte suivant:

    width: 100%;
height: 100%;
max-width: 800px;
max-height: 600px;

    Cela permettra d'élargir la taille de l'image de la mère jusqu'à 800x600.
    Assurez-vous que l'élément parent est aussi de la largeur de la fenêtre.

    OriginalL'auteur gimg1

  3. 2

    Vous pouvez utiliser les CSS media queries pour cette

    @media all and (max-width: 768px) {
/* 768px is usually the width of tablets in portrait orientation */
/* You can use any other size you see fit */

    img {width: 100%;}
}

    Cette volonté d'appliquer le style des informations uniquement lorsque la largeur est sous le max-width.

    OriginalL'auteur Anh Nhan Nguyen