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.
Related
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 entirely new to the world of CSS, let alone media queries, so any help would be super appreciated!
I'm working on an assignment for school where we have to test our media queries and have a different style sheet for a variety of device sizes. I think I'm basically having the same problem as discussed on this post: Media Queries - Mobile vs Desktop Browser, but it's not clear to me how that commenter resolved their problem.
This is probably the relevant coding where the error lies, I think?:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--container div tag-->
<!-- Low res -->
<link href="colors2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 128px)" />
<!-- Mid res -->
<link href="colors3.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 176px)" />
<!-- High res -->
<link href="colors4.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 240px)" />
<!-- Touch -->
<link href="colors5.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" />
The queries work on desktop browsers, but when I launch the page on Opera Mobile Emulator with (what I think are) the correct screen resolutions, they all take the default of the min-width 320px style. I've tried to add ", screen and (min-device-width:" to the tags as well, but for some reason, having both cancels the whole thing out and I end up with my basic HTML on a white screen. I've also tried doing the #media thing where I then post the styles below, but it seems like Dreamweaver 6 is rejecting them (???) because they get highlighted in maroon and, again, I get the white background.
So...I'd be very, very thankful for any help! And I should also mention that the very small min-widths are part of the assignment. I think they're all too small, personally! Thanks so much:)
Opera Mobile Emulator works very different from the real app.
I'd suggest you to test the site live in a mobile device.
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.
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.