Home/ Questions/Q 6599207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:27:36+00:00

I’ve looked through the stack overflow topics on this question, as well as some

  • 0

I’ve looked through the stack overflow topics on this question, as well as some google search results but I can’t seem to solve my issue.

I’ve created a stylesheet for mobile devices(mobile.css) which is essentially a copy of my main.css with changes to many of the attributes. When I load only mobile.css as the stylesheet it looks great on my iPhone, just how I want it to. However when I put both in, I am getting a mix of both, but more of the main.css

Any idea why?

<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    According to documents, syntax of loading another file in specific device/condition is like this:

    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

    This will load only one css file for every single amount of width

    For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640 pixels that many developers don’t count this width as a mobile browser width. If you add this below meta tag in your document problem will be solved

    <meta name="viewport" content="width=320">

    This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here.

    • 0