This is an awesomium-specific question. I am trying to make something that does screenshotting of websites for testing purposes. I need to be able to simulate mobile devices such as an iPhone or Android device. To this end, Awesomium is great but I would need to be able to set the device-width for the purposes of CSS media queries. Eg:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
Is this possible?
Yes, it is possible.
Unfotunately Awesomium has a nasty bug. Still not fixed now on Awesomium 1.7.3.0.
If HTML tag has properties, page won't work with media queries:
<html lang="ru-RU">
But you remove properties, it should work just fine:
<html>
Related
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 have two style sheets for one page.
<link rel="stylesheet" href="css/lsharecomplete_mob.css" media="handheld" type="text/css" />
<link rel="stylesheet" href="css/lsharecomplete_dt.css" type="text/css" media="Screen" />
I am testing on android and Iphone, and both seem to be picking up the "screen" style.
Is it better to use #media in one style sheet instead of using alternate sheets or am I doing something wrong.
I have checked the link and server directories to make sure the files existed and where linked properly.
iPhone's Mobile Safari doesn't consider itself of the "handheld" media type.
iOS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iOS.
Source.
Instead, use media queries.
You have to load the handheld style AFTER your standard style. Otherwise everything from your mobile design will be overwritten.
My customers' website works fine in all major web browsers. Except for the iPad. Some things render a little bit differently.
I'm using the following conditional stylesheet
<link href="{$SkinDir}/ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 600px) and (max-width: 1024px)" >
It now fixes the iPads' stylesheet problem that I had....
BUT
The site worked fine on other devices such as my HTC Phone. But now that the iPad stylesheet has been loaded, it is now reverting to that stylesheet.
I tried using :
<link href="{$SkinDir}/phones.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 600px)" >
But it hasnt seem to have cascaded to the phone handset at all, It is still referring to the ipad stylesheet.
Is there any way at all, I can just target the iPad!?
It is worth noting that the site is running on a SMARTY Templating engine. The file that relates to the conditional stuff can be found here
Many Thanks in advance.
Do the conditional css < link > on the server level (php), rather than the client level.
you can use this http://shaunmackey.com/articles/mobile/php-auto-bowser-detection/ to detect the iPad and set a flag so you know which css to include.
I'm using
<link href="stylesheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
To include an alternate stylesheet for mobile devices. But it seems that the stylesheet is not being loaded at all on my HTC. Why is this? And more importantly, how do I make sure my mobile stylesheet is loaded on all handhelds?
You can view the live website here: www.webvalid.nl/thomas
Thanks in advance!
I'd recommend using the CSS3 #media screen and (max-width: ###px) media queries as documented nicely at http://webdesignerwall.com/tutorials/css3-media-queries
All HTC (Android ones, anyway) and iPhone browsers support this, as far as I know, due to their good CSS3 support.
With this code:
<link rel="stylesheet"
type="text/css"
href="media/css/mobile.css"
media="handheld" />
<link rel="stylesheet"
type="text/css"
href="media/css/screen.css"
media="screen" />
on my N78 the nokia's default browser and opera mini load screen.css instead of mobile.css.
What am I missing?
Nokia N78 uses the S60 browser, which reads only "screen" stylesheets. It won't read the "handheld". It doesn't support media query. Instead of trying to type everything here, have a look at this article and you will solve the problem - http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
Using the iPhone as an example:
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
I have no idea which browsers/devices this does and does not work for. The only mobile device I've developed for is the iPhone. But I'm sure you can give it a shot with your nokia.
More on media queries
Opera Mini uses the media type screen because it fits its behavior and capabilities best. However, it will use handheld stylesheets if you switch to mobile view mode. See A developer’s look at Opera Mini 5 beta 2 for more information.