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/
Related
I am working on a website right know, but I have a weird issue with the view on mobile devices.
When I resize the window on a desktop browser the elements and fonts are changing with the viewport how they should.
When I open the website on a mobile device all fonts and elements (e.g. the burger menu) are way to small. It looks like it is a scaling issue or something similar.
I have the meta viewport tag in the head so that is not the issue.
I couldn't find any similar questions here or on any other forum. I hope somebody can help.
I have attached some screenshots, but if necessary I can provide the URL.
Thank you in advance.
Full Screen Window
Resized Window
Responsive example 1
Resposive example 2
Make sure to include responsive meta tag to insure that your browser gets the right width of your device instead of zooming out the page
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the
page at the width of its own screen. So if that screen is 320px wide,
the browser window will be 320px wide, rather than way zoomed out and
showing 960px (or whatever that device does by default, in lieu of a
responsive meta tag).
Further reading Here
Unfortunately mobile phones have such high screen resolutions that my website comes it far to small. It adapts perfectly when zoomed in on a desktop browser but unfortunately on mobile browser the webpage viewport size does not actually change once zoomed. To try and solve this I have already gotten a script that detects a mobile user agent and then sets the body width to 500px, this looks about the perfect width but unfortunately the mobile browser does not set its viewport to 500 even after I set the meta for viewport 500 and this results in my webpage rendering in the corner of the browser. Once zoomed in it looks fine though but that is not what I want. My site is in some way similar to nokia.com and I want it to behave in the same way on a mobile client.
Can someone please tell me what the correct procedure is for doing something like this because I am in no way a proper web developer, I am just doing this to learn.
Here is my meta:
<meta name="viewport" content="width=500,initial-scale=1,maximum-scale=1,user-scalable=no">
You need to write conditional CSS rules for smaller browser sizes.
One example:
#media screen and (min-width: 768px) {
.item1{}
.item2{}
}
Here is a site I just found through a quick google search that should be able to get you started at least. http://www.conditional-css.com/usage
Good luck with your learning!
It is better to use #media queries (available is css3)
Something like:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) /* You can change this value per your requirements */
{
/* Your custom styles for mobile device */
}
Try this
<meta name="viewport" content="width=device-width", maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 />
and use the media query to target all the screen size
http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport
Hope this helps you
Finally solved it! It seems the reason I was having so much trouble is because the mobile device I was testing in was a Windows Phone 8 device and apparently WP8 does not really respond well to the viewport meta tag. This is easily solved by the addition of a MobileOptimized meta tag.
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.
I'm using the Semantic Grid System to build a responsive site. However, something isn't quite right with the media queries that should obviously kick in once it hits a particular screen size.
I'll reference what i mean with their example on the website : if I view this on my iPhone for example, given that it is supposed to adjust to a single column structure on a mobile device, it still throws out the web version of the page. That is true for both Safari and Chrome on my iPhone. However, if I use the RWD bookmarklet to check it's appearance at different resolutions it appears as expected for the mobile resolution. Also, ironically, if I resize the page in Safari on my desktop it also adjusts accordingly once I get down to the approriate screen size, but not in Firefox.
The media query that it uses once it hits 720px is
#media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
}
}
and I might be wide of the mark here but I think that must be the issue. But given that this is directly from the semantic.gs website I don't think I have the expertise necessarily to question their own code.
Any idea what the problem might be?
The behavior that you describe can be the result of not using the 'viewport' meta tag in your markup:
<meta content="width=device-width" name="viewport">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
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.