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.
Related
I am developing a PHP/MYSQL website.
For most of the pages the responsive design with Bootstrap is fine.
But for a few pages not only the columns have to rearrange for xs screen sizes, but the content of the divisions change also. Below is an example of a page which is quite different on for the xs version.
What I did is simple: I used hidden-xs to hide the layout on large screens and visible-xs to show the layout on small screens. So I guess the page needs twice the resources to load which is not highly optimal.
Is there a more optimized way to deal with this issue of different style and content for different screen sizes when it only concerns a few pages? (if all the pages where very different I guess the best solution would be to create a mobile version on a sub-domain).
I am familiar with a method although I personally never got the chance to use it. You can create stylesheets for different screen sizes.
<head>
<link rel='stylesheet' media='screen and (min-width: 1px) and (max-width: 257px)' href='your-css.css'/>
</head>
I have an image that is of changing sizes (calls a different image from database on every different view).
I want to display the image in a responsive web application.
Like so - in a smartphone device I want it to fit the size of the screen - but be a bit smaller (so that, say, 30% of the text underneath will be visible, and the image will take up around 70% of the screen).
I have already built the application and the image is there, I just want to make sure different image sizes will each react well to various browsers. Mobile and not.
How do I scale the image (any image that shows up) so that whatever image is called, and whatever device is used, the image will fit the screen size at around 70% of the screen in the small device, and in a desktop or tablet view the image will be in its normal size (that is, assuming that it is not huge and too high a resolution - in that case I would want it to be scaled down in the other views as well).
How should I go about this?
Do I need to use ImageMagick, picturefill, css, javascript (jquery? coffeescript? bootstrap) or can I use plain html5? anything advanced? canvas?
You should look into using CSS3 Media Queries.
You could target smartphones using a query similar to below, where you would define the image in question to be a different size depending on the device size your website is being viewed in, e.g.
#media screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#myImg {
width:70%;
}
}
Then, in your CSS file for your regular website, you could then simply leave the image at full size (as I'm assuming you have already done).
It's generally better to put your Media Query CSS into an external stylesheet itself too, so your <head> could include something like the following:
<link rel="stylesheet" type="text/css" href="desktopStyle.css">
<link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)" href="smartphoneStyle.css">
I have used picturefill, and it's pretty cool.
If you need more fine-grained control over your classnames, or need load events for your images, you can also try my jquery-pikshur plugin.
Why does body tag's background on this site link appears shrunk on the iPad?
Mobile Safari has the tendency to scale large background images. To avoid that you can set the background size: http://www.css3.info/preview/background-size/
You should definitely create a separate stylesheet for the iPad. You can use the following to do so:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
On this link, you will find information about the orientation of your website on the iPad and how to deal with it.
My advice would be, to create a separate stylesheet (css file) for the iPad version of your site, no matter what you do, you should just create it and add a link tag like the one shown above.
If you have a large background picture for the iPad version, you can reduce it to fit the iPad, if that's the only thing you've got a problem with. I'd say you should reduce the size of the image to 1024px and declare it in the separate stylesheet for the iPad, and you will see the end result.
BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/
So I am making this personal website that has very litte content, and if I use the standard 960px width, there are very wide white spaces. It would be nice to have a shorter width, but then other problems arise such as bad view on other resolutions. What would you suggest?
To suit any screen resolution and make your website look good in any size, I would recommend going for a responsive design, using Media Queries. You can read up on the topic here.
That way, you can use 960px width for visitors with a browser window larger than that, and then make the website resize gracefully for visitors using mobile devices etc.
However, don't get too hung up on 960px width, that is no standard but simply a format that often works well, since 960 is a number that is easy do divide (to make columns) and is a width that is below the still quite common 1024px resolution.
You can try media queries, something like this
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) href="shetland.css" />
You should start thinking of building Responsive websites using CSS3 Media Queries.
I recommend the Skeleton CSS Framework (link), pretty easy and lightweight.
Its depends on your webpage. And there are some standards for dimensions.
Check this: http://www.hobo-web.co.uk/best-screen-size/
use "position=relative"
for every layer!!! this will eliminate your problem with width modifica
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.