I have my mobile stylesheet as such:
<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />
And my main stylesheet as such:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
When I go on the page from a mobile device, it has a mix of mobile and main stylesheet rules. How can I make the mobile stylesheet be exclusive to mobile devices, and the main stylesheet exclusive to the screen?
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />
Also make sure you have this in your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Well, your problem is that both devices use screens. Your css/style.css file targets any devices that uses a screen, and any styling should be as applicable to a narrow device as it is to a wide device. You may need to refactor your style rules.
Also, make sure that your mobile stylesheet is listed after the generic screen one, or else the generic screen stylesheet will override the mobile one.
Related
Hey I have a problem which is two part but the first one is obviously where I must begin:
I have inherited a project which has three stylesheets, desktop.css, tablet.css, and mobile.css - they are called like so on the page:
<link rel="stylesheet" type="text/css" href="/css/tablet.css" media="all and (min-width:600px) and (max-width:799px)" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" media="all and (min-width:10px) and (max-width:599px)" />
<link rel="stylesheet" type="text/css" href="/css/desktop.css" media="all and (min-width:800px) " />
However the programmers before me were in a hurry and really, most of the code is the same; they just made tweaks per file as needed. Probably 90% of the code is the same.
My goal is to have a common stylesheet first as below:
<link rel="stylesheet" type="text/css" href="/css/UNIVERSAL.css" />
<link rel="stylesheet" type="text/css" href="/css/tablet.css" media="all and (min-width:600px) and (max-width:799px)" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" media="all and (min-width:10px) and (max-width:599px)" />
<link rel="stylesheet" type="text/css" href="/css/desktop.css" media="all and (min-width:800px) " />
and get all common css into universal.css, and include on the other files only the "overrides" needed for that particular device.
All three files are a mess. There are multiple instances of a class/id declarations. They are quite out of order. I know there are CSS prettifiers out there, but is there any application which will take a CSS file, "READ" it, and re-output it in a condensed format?
It would be also nice to do a diff on the css and see what's different. DIFF itself is not going to work because of being out of order in probably multiple ways. So if you know anything in this regard, I'd appreciate it.
Check the advanced options of proCSSor
I have three stylesheets: a persistent one, one for windows 800px or greater ("standard"), and one for windows smaller than 800px ("mobile"). My problem is that the standard style sheet is being recognized and applied, but when I resize the window to under 800px, the mobile sheet is ignored and I'm left with only the persistent style. I suspect it's a basic syntax error, but I haven't been able to find the problem.
<link rel="stylesheet" type="text/css" href="persistentstyle.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" title="standard" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:799px)" title="mobile" href="mobilestyle.css">
I already have the necessary meta tag in the header:
<meta name="viewport" content="width=device-width" />
Thanks!
May be you need this:-
<meta name="viewport" content="width=device-width">
Generally, the most common mistake is not including the meta tag required for CSS media queries to work:
<meta name="viewport" content="width=device-width">
This link explains the viewport meta tag, and additional properties you can assign to it, such as allowing the screen to be scaled, and more.
I'm trying to optimize my webpage to 720*1200 mobile devices:
My page
It works perfectly on 320*480 and 480*800 devices, but not on 720*1200.
The page loads zoomed in,
just like the layout viewport would be 720*1030 but the visual viewport would be 360*515.
I've set the viewport tag, but it hasn't any effect.
<meta name="viewport" content="width=device-width,user-scalable=false" />
<title>teeg bejelentkezes</title>
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width:720px)" href="css/style-720.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:719px) and (max-width:719px) and (min-device-width:480px) and (min-width:480px)" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:479px) and (max-width:479px)" href="css/style-320.css" />
Thanks for any help!
Recommendation:
Use min-width and max-width in the media queries.
Avoid using min-device-width and max-device-width.
Viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Add minimum-scale, maximum-scale, or user-scalable if needed.
Media queries:
<link rel="stylesheet" type="text/css"
media="only screen and (min-width:720px)"
href="css/style-720.css" />
<link rel="stylesheet" type="text/css"
media="only screen and (min-width:480px) and (max-width:719px)"
href="css/style.css" />
<link rel="stylesheet" type="text/css"
media="only screen and (max-width:479px)"
href="css/style-320.css" />
Explanation:
min-width and max-width are easier to work with than min-device-width and max-device-width. Using all 4 of them may result in media queries that will not be applied in some cases, since the two sets of values do not always match.
On iOS devices, min-device-width and max-device-width act on the width in landscape mode, regardless of orientation, while min-width and max-width act on the width of the current orientation.
Also, on Android devices, min-device-width and max-device-width correspond to physical pixels, while min-width and max-width correspond to dips (device-independent pixels), which makes it easier to work with devices with a variety of pixel densities.
The Boston Globe, the best example of adaptive-content responsive design, works almost entirely on min-width and max-width.
Try these:
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Thanks for answers, i've tried Matt Coughlin's suggestion, but the AVD (720*1280) included the 480px css instead of 720. In the end I switched my approach and i changed my design to responsive. RWD
and Examples
on my site i have 3 css
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />
i thought the media handheld will automatically load my site formated for devices
when i load my site with my android, i still see the "site.css" why it does not load the handheld.css?
Apparently Android/iPhone/Nokia browsers don't think that they are handhelds.
You should use media queries to detect devices.
Below are my stylesheets for my mobile site:
<META name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<META name="HandheldFriendly" content="true" />
<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 481px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="handheld" href="css/mobile.css" />
I loaded the page in an iPhone and it looks like it's supposed to. However when I load the page in a Blackberry it doesn't use the "handhled" one but rather tries to use the other stylesheets. Anyone have any thoughts to why this happening?
Yes most phones even more so the older ones will simply ignore the "media" type and I would suggest using some from of server side detection if you need the css to be different on different phone types.
Consider media queries (as you've done for iPhone) instead of media types. http://www.alistapart.com/articles/responsive-web-design/ Many devices don't support the handheld media type.