CODEWITHSUNDEEP
htmlcssuser-interfacemobile
Caio Tsubake
Caio Tsubake

Reputation: 111

How can div maintain the same size when on mobile

I am working on a UI that, when displaying on a mobile device, gets too small for it to be used properly.

I have the size of the div fixed in pixels, and it keeps the size if the window is resized, but when I test it on mobile mode on chrome or on a actual mobile device, it shrinks. How can I stop it from behaving like that?

Upvotes: 0

Views: 1147

Answers (3)

Henry Le Berre
Henry Le Berre

Reputation: 920

in the css, set the divs min-width to the width that you want, along with the viewport meta. like this : 

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
           div#mydiv{
              min-width: <== put here the width that you want;
           }
        </style>
    </head>
    <body>
         <div id="mydiv"></div>
    </body>
</html>

Upvotes: 0

Kristian Roebuck
Kristian Roebuck

Reputation: 3379

Without being able to see your code it's hard to give you the correct specifics. That said, there are two common places to start, these are:

  • This meta tag will allow mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window.

    <meta name="viewport" content="width=device-width, initial-scale=1">

  • CSS media queries will give you the flexibility to change how your page appears at different screen sizes.

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Sounds like your page is zoomed down because it does not contain this line of code in the head:

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

Upvotes: 1

Related Questions