CODEWITHSUNDEEP
htmlcss
Erica wang
Erica wang

Reputation: 111

HTML unable to target different devices

I built a site using HTML, CSS, and Javascript. It has two layouts I would like the site to choose automatically using the screen size. To do this, I linked to two CSS files in my index file. Here is how I formatted it.

    
<link rel="stylesheet" media='screen and (min-width: 750px)' href="css/largeScreen.css">
    
<link rel="stylesheet" media='screen and (max-width: 750px)' href="css/smallScreen.css">

This works on my computer when I change the size of my browser window. However, when I uploaded my site online and accessed it with my phone, I realized that it doesn't pick the correct layout (should be from the smallScreen.css file).

If anyone can help me with this issue, it would be greatly appreciated. :)

Upvotes: 0

Views: 42

Answers (1)

Xavier
Xavier

Reputation: 3513

Like @ThomasAltmann said, have you set 

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

in your <head>? I came accross this issue that had me stumped for hours before realizing I forgot this tag. This tells mobile browsers not to automatically scale the website to display it as if it were on a normal desktop-sized window.

Upvotes: 1

Related Questions