I have had a look around but need a more concise answer to this question.
I'm trying to workout the best way to construct the CSS in my current project for multiple media devices. I want to be able to have a stylesheet for:
CSS resets (everything to use)
The normal desktop 'screen'. (only desktop computers)
Printing 'print' (only printing)
The iPhone/handheld (only handheld)
IE6 stylesheet (only IE6)
So my question is: Am I right to think the right way to control this would be..
set the media="all" for the resets.css
set the media="screen" for the
desktop.css
use conditional comments 'here' for
legacy browsers.
set the media="print" for printing.css
use css3 media queries such as :
#media only screen and
(min-device-width: 320px) and
(max-device-width: 480px){ }
has anyone got a little more experience setting up multiple device css that could share their methods? how do you organize this yourself?
It can depend on several factors not the least of which is how your designs flows. This is a great article on designing from mobile up:
http://stuffandnonsense.co.uk/projects/320andup/
You can learn a lot just by looking at how these guys developed their boilerplate.
And, to see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.
Related
I'm applying media queries on my project , but when I`m resizing the browser , it doesn't work.But when I resize it from the developer tool (inspect element) it works...It sounds ridiculous but I'll show you with images.
In the following picture. I've applied media query for my menu-bar. As you can see , when I resize my browser , it doesn't work.
but when I resize the project from the developer tool , it works... I've applied only <meta name="viewport" content="width=device-width, initial-scale=1"> for the media queries.
The second issue is the following. Is there <meta> tag for tablets viewports?
Now my Media Query works on all mobiles , but on tablets doesn't. I've tried to reach some answer for mu issue but I didn't find anything...
My thoughts are that its because your query only applies to the device. If you were to try something like:
#media screen and (min-width: 480px) {
background-color:red;
}
Try that, but to be honest, I would think about introducing a style framework like Bootstrap.
It takes most of the headache around queries away. Also, it's great because you generally want to cater to mobile screens first, and Bootstrap does this pretty well by default.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am building html pages which can have text, pictures, videos, facebook like buttons etc. I am using CKeditor to create pages. I store that html in database and then access it for web and mobile applications.
It works fine for web but not for apps. Sometimes problem with videos, pictures, width, height etc and quality is also not good on apps. If I fix things for mobile apps then web disturb. HTML5 support mobile environment but how can I get one html for all environments?
I don't want to create seperate html for all environments, I want to create one html and it should work for all environments. Anyone can suggest some best solution?
You need to use Media queries, view port tag
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
/* iPads ----------- */
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* smartphones**/
}
Meta tag into header
<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"/>
Use percentage in height / width, fonts
You also need to know UI properties in java for webview like margin, padding etc.
You can use CSS3 media queries as #Smokescreen suggested.
You can use these directly within your stylesheets and include the stylesheet on the page the same way as normal, but additionally by adding a media attribute to a link tag.
<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css" />
Or with inline CSS:
#media screen and (max-device-width: 480px) {
.button {
background: #000;
}
}
It will take some time to get your website to look perfect on all devices though. I'd suggest thinking about if it's even worth spending so much time modifying your website just so it looks good on mobile etc. For example, why bother adapting a website about retirement homes when you know that the target audience (old people) will barely ever be visiting your website on a mobile device. You haven't specified what your website is about, so it's up to you to do your research and decide on this.
Another option is redesigning your website and using Bootstrap. This option may seem a little over the top, but you'd be suprised how quickly you can build decent looking websites with bootstrap which are fully responsive.
Can you add any CSS to style it differently depending upon the screen size of the device that is opening the page.
eg make yourself a css stylesheet and then use media queries to define different styles for use with different size browser windows. Then in the 'source' code view of ckeditor assign different ids or classes to your html text such that they then take the styling from the stylesheet for use at different screen sizes.
This way you can say something like - for a screen resolution of 1024px or above style the text at 25px etc etc, for a screen of 600px or less style the text at 12px etc etc. You can also use this method to recofigure your layout for different screens.
I'm looking to create a mobile version of our website. What's a good way to provide the best, most fully featured version.
We have HTML5 and CSS3 Website. Is any Converting is possible?
Thanks in advance...
There are several things to consider when converting your site, what size screens and devices are you going to support - just phones or pads too? Also what is the content / functionality of your site. If it's fairly static display sort of data then you may consider "Responsive Design" (lots of links if you google it). You modify your layout to handle the screen sizes. You could use Modernizr or something like that to determine what functionality the device has and determine how to skin / handle navigation, form data, etc. I don't think you'll find anything to just "port" your site (other than paying somebody else to do it)
I'm assuming you plan on having similar content on your mobile version of your website that you do on desktop version, if so you could use media queries to configure the styling of your site to best fit various mobile screen sizes, such as:
/* Media Queries
------------------------------------------------------------------------------*/
#media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (mx-width: 600px) {
/* then modify css for the small screen such as centering headers, setting inherit widths etc */
}
I'm just reading up on how to develop sites with responsive layouts. I think I've grasped the idea and can now style content differently, depending on browser dimensions.
However I've also looked into Jquery mobile and I like the UI that they use.
My question is, is it possible to combine the two? ie. Could I have a web page that renders normally when viewed on a pc/mac, but when the browser width drops sub 320px (for example), could I switch over to using Jquery mobile?
I thought this'd be possible by including the jquery mobile scripts in my page, along with the 'data role' attributes, but only including the jquery mobile stylesheet if the browser is a particular size, ie:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
Is this at all possible? I can't tell whether I'm trying to use Jquery mobile for something it's not designed to deal with? Should I just have an entirely separate site ie. http://m.mysite.com that has standalone mobile content? Or is it possible to have an adaptive website?
Thanks!
Yes jQM Supports Media queries:
http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html (Grade A)
http://jquerymobile.com/test/docs/api/mediahelpers.html
http://jquerymobile.com/gbs/
that is a very interesting question...
The answer depends on factors like how differnt the 2 designs are like one below 320px and other above that..
If the difference is huge, having a separate mobile website is a good idea..
But if the difference is minimal, you can just handle that with the CSS Media Queries.
You can combine the CSS Media Queries with Responsive Web Design to handle different sized screens..
The question was not really answered as it was asked.
You cannot use JQM only on the mobile site and not on the desktop verion using only CSS media queries. You'd have to do completely separate sites and do a redirect.
A possibly better option is to use JQM on both mobile and desktop version, in which case CSS media queries work perfectly. The problem with doing that is it limits both how you can use JQM and how you design your site. You really can't take an existing modern desktop design and make it JQM.
The JQM demo itself uses media queries to turn it into a two column layout on desktop and tablet sized browsers, and single column on phones. Issues with doing it that way: the entire page acts like a page, meaning divs such as side menus transition and reload with a new page (which is why they only use the fade transition). Normal AJAX loading of content that doesn't involve the whole page will need to either be made to involve the whole page, or done custom outside the normal JQM way of doing things. Might not be too hard in some cases but it will up the JS code and make certain applications much more complicated. I can also see the CSS getting quickly out of hand for designs that are more complicated than the JQM demo.
I have got a requirement where I need to write a HTML/CSS, which should display Landscape and Portrait, depending upon the orientation of the iPad, that is initially I want to write this using HTML and CSS and then later use it for the iPad developement.
My question is what is the best way to achieve this?
Does it make sense to have two different html/css files and load them depending on the orientation of the device or is there any other way to implement this. Any information regarding this would be appreciated.
Thanks
Raaks
You want to look at using responsive web design to achieve this. You can determine what styles to apply depending on the size of the screen. Remember, the screen is wider when it's in portrait view.
What you do is, you create two different stylesheets. One for when it's in portrait and the second for landscape. Then, you use CSS3 media queries to switch between the two.
Sample code:
Portrait:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="portrait.css" />
Landscape:
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1024px)" href="landscape.css" />
As you can see, you are passing the target medium and declaring a target width for each stylesheet. The portrait stylesheet will only be applied if the screen's current width is less than or equal to 768 pixels. Conversely, the second stylesheet will only be applied if the screen resolution is a minimum of 1,024 pixels wide.
A simple tutorial describing the technique.
The original A List Apart article describing the technique.
Now if by iPad development, you mean native applications then this will not work. For native applications, you need to use the cocoa framework to determine the device's orientation. However, if you are simply using a webview in a native application then this will work fine.
Hope this helps.