How to make an image full screen on mobile devices but not in desktop?

css, fullscreen, html, layout, mobile

Solution

What you want to use is media queries. Using a media query, you can enforce different CSS rules based on screen size.

For example:

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

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

That will force an img with the id of underconstruction to go full width and height if the device screen is 600px or smaller. 600 is a good size because the newer iphones have a greater height than 480.

In addition, you'll need to force the view port to a 1:1 ratio on mobile devices with the following 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">

Problem

I put an image to inform that my site is under construction. It's a 800x600 image that maintain it's original size when you access in desktop. It's the only thing in the page. I want to make it fit in the whole screen when people access it from cell phones. How? ``` <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> ```

Original source