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.
Related
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>
I am building a PhoneGap/Cordova project for iPhone.
I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:
<!--Main Style Sheet-->
<link rel="stylesheet" href="css/styles.css" />
<!-- iPad specific css-->
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />
The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.
Can anyone help me out?
Thanks!
For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)
max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)
In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.
I would recommend utilizing only one style sheet with a media query inside of it.
#media screen and (max-width:768px){
/* Device Specific CSS rules here */
}
I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.
This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.
When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.
Also, CSS3 Media Queries are supported by most modern mobile browsers.
This question already has answers here:
Suggestions for debugging print stylesheets?
(13 answers)
Closed 5 years ago.
I have used (as usual) #media print rules to specify how the print of a web page should be different to the online version. This works quite well, but the test is really difficult. What I usually has to do are the following steps:
Create the different style for screen and print.
Start your page in the screen mode
Print the page e.g. to a PDF printer.
Look at the result.
Try to find the rules that behave wrong.
What I would like to do (but was not able to do it with any browser):
Create the different style for screen and print.
Start your page in the screen mode
Go into the preview print mode (e.g. for Opera, Firefox available)
Use the available tools like Firebug (Firefox) or Dragonfly (Opera) to inspect the DOM and the current styles.
Change the CSS on the fly, reload the page, and look at the result and the DOM again.
Is there any browser or combination of browser, plugin and process available to get similar results? If you have ideas how to change the organizations of the files, with the most minimal changes to get the wished result, you are welcome.
Chrome Developer Tools has this feature.
Open Chrome Developer Tools for the page you want to test.
Open the Drawer if not already open. (Press Esc.)
Open the Emulation tab.
Click Media in the left menu.
Check CSS media and select print from the select box
Source: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types
The Firefox pluging called "Web Developer" ( https://addons.mozilla.org/en-US/firefox/addon/web-developer/) has a "Display CSS By Media Type" option.
Have you tried with Print Friendly Google Chrome extension.
Its a nice extension which adds a button and generates pdf of the web page on a click.
Hope that might be easier than your current process.
I have found a different solution to my problem inspired by Using Rails 3.1 assets pipeline to conditionally use certain css. Here is how it works:
Use in the main HTML file the following directives for stylesheets:
<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
isolate all rules in your stylesheets that are
appropriate for screen and print (Stylesheet: application.css)
appropriate only for screen (Stylesheet: screen.css)
appropriate only for print (Stylesheet: print.css)
During test of the print-out of your web page, switch the stylesheets in your main HTML file:
<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="print" rel="stylesheet" type="text/css" />
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />
Notice the switch in the second and third line for media="print|screen".
As the result, you are now able to call your main HTML file, and see how it will look if you print it out under normal conditions. All the tools you normally use (Firefox Firebug, Chrome Developer Tools, Opera DragonFly, ...) will work as normally, so you are able to check your DOM, see the boxes, change CSS on the fly and just reload your page then.
Works pretty well for me, if I will stumble over some drawbacks, I will come back and notate that as well.
If you specify your Print & Screen CSS rules in separate files, you can do this quite easily using the Chrome Developer tools. Load your page and open the Developer Tools. From the "Elements" view, edit the media="print" line so it reads media="all".
For example, if you link your style sheets like:
<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" />
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />
Change:
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />
to read:
<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />
You will now have the print styles applied to the copy in your browser window. You can navigate the styles and elements as you would with any other webpage.
Here is a practice that I have found helpful with styling for print when the print layout needs to be a modification of the generic styling.
Create a print style sheet that uses #media print { } to frame the print styles
Apply that style sheet last
While working on print styles, temporarily comment out the lines that frame your print styles
Use Firebug and Web Developer in you accustomed way
Uncomment the media bracketing
Something like:
/* #media print { */
#sidebar {display:none;}
/* } */
If I have a CSS media query as follows
<link rel="stylesheet" media="only screen and (max-width:1024px)" href="css/ipad.css">
<link rel="stylesheet" media="only screen and (min-width:1024px)" href="css/desktop.css">
I see that it loads both the CSS desktop.css and ipad.css
This is the case even if I change the min/max-width to min/max-device-width
Why is this so AND how do I ensure that only the relevant CSS gets loaded ?
I say, it's normal that the browser loads both files. But it should apply only one style. What happens to you, are both styles applied, or only one?
You could also work with the orentation parameter btw.
We want to use the same page to service the desktop, iPhone, and BlackBerry, so we have to come up with a way for the different devices to load different stylesheets.
So, is there a way to specify a stylesheet to run on BlackBerry?
For example, iPhone's use the media attribute:
<link media="only screen and (max-device-width: 320px)" href="style.css" ...
I would parse the User Agent string using a server side language and serve the correct stylesheet. The blackberry seems to identify itself with "Blackberry/xyz". See e.g. here