I have set a background for a webpage and i have done it responsive by giving media queries.
I have made the size of background 175% for ipad on portrait mode, when I am checking the result on ipadpeek.com (please check the website here once to see the original portrait mode background and landscape mode background )
For the resolutions of ipad, its looking fine on landscape mode and portrait modes, but on ipad itself on portrait mode, the background is not coming correct. It becomes small on portrait mode. Here are the screen.
This is the url to my site.
Here is the screenshot of ipads portrait mode.
Please Help me if anyone can !
Many Thanks in Advance
Rather then using Background-size: 100% 100%
Try using background: cover; This should allow the image to be aligned like it is on the webpage.
Related
I'm creating a landing page and I need it to have slightly different height in IE for desktop and modern IE (in Windows 8.1). Can I do that with media queries? I tried binging and googling but couldn't find anything.
Thanks!
Short answer: no.
Media queries will help you if you need to respond to the viewport size. For example
#media screen and (min-height: 900px) {
/* rules for tall viewports */
}
While you can be sure that IE metro/modern will be the full height of the display, you can't necessarily differentiate that from IE desktop in full-screen mode (i.e. F11), and of course your page may be viewed from a variety of devices with different display dimensions (including rotatable devices in portrait or landscape orientation).
I'm having an issue with how my site is being displayed on my ipad. I've tried to set the viewport to:
<meta name="viewport" content="width=device-width, initial-scale=1">
Which can be seen at http://erichschubert.com/viewport.html.
But it always results in my site appearing zoomed in and even when zooming out, the whole site is not visible.
As of now I have it running with:
<meta name="viewport" content="width=1024">
Which can be seen at http://erichschubert.com.
It appears fine, however, when the ipad is turned to landscape it zooms in and leaves a huge black sidebar on the right side.
The header on the site has a fixed position and is also not displaying properly when zoomed in. Is the issue simply that it is fixed? I would love to able to display the whole site in both portrait and landscape and also be able to zoom in uniformly.
Thank you so much for any help in advance.
The initial-scale=1 is only practical if you use it alongside media queries, so it accurately scales the page to fit the custom styles for that media query.
Changing it to width=1024 only forces a fixed page width, which is no use in your case.
The smoothest way to have a page scale without zooming issues is to use media queries, to allow it to resize depending on the screen size.
Most devices will re-assess the screen width when they detect a change in orientation, while others will simply zoom in to fit the portrait layout to the landscape view.
If you want to be sure, you could use:
#media only screen and (orientation:portrait) {
/* portrait stuff here */
}
and for landscape:
#media only screen and (orientation:landscape) {
/* landscape stuff here */
}
I wouldn't recommend being so specific as to target individual devices, it's a never-ending workload. 'iPad' used to mean 768px x 1024px, but now covers 2048px x 1536px too. There will always be new devices, but they will all be targetable via simple media queries.
I am trying to master responsive design. I created this media query to cater for smartphones
#media screen and (max-width:500px) {
/* css rules for smartphones */
}
However, when I look on my iPhone, it is not showing these rules, even though when I resize my browser to under 500px the rules apply.
So I added in jquery
width = $(window).width();
$('#info').html(width);
This showed me that my iPhone was actually 980px wide, which I thought was strange, as I was sure I read it was only 320px wide. So this lead to great confusion. After lots of playing around I seemed to have got it working with this:
#media screen and (max-device-width:500px) {
/* css rules for smartphones */
}
But I have no idea why it works with this, and what I have actually done.
Can someone tell me what "device" means? And why is the iPhone resolution 980px according the jquery?
When using media queries, you should also use:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
in your header.
max-width is the width of the target display area, e.g. the browser
max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
For most devices the screen resolution/display size is equal to the viewport. This is true of desktop and laptop computers, however for mobile devices this may not be true!!
Many phone browsers scale web pages down to a wider viewport width to fit them onto the screen. This is sometimes called overview mode. These browsers allow the user to zoom in and scale the pages up to view the bit they want to see. For example, although a device screen might have a width of 320px the viewport can have a width of 980px. In this case a web page designed at 980px or less will fit completely on the screen.
The difficulty comes with different mobile devices and mobile browsers as they have different viewport sizes. Here is a short list of some popular mobile browser viewport sizes:
Opera Mobile browser viewport 850px
iPhone safari browser viewport 980px
iPad (landscape & portrait mode) viewport 980px
Android browser viewport 800px
IE mobile browserviewport 320px
Many phones have a different pixel density or dpi than the desktop 72dpi, so setting target-densitydpi=device-dpi is a good idea to prevent blurry images due to scaling effects.
The viewport meta tag for the touch sensitive sidebar version of this blog is:
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |high-dpi | medium-dpi |
low-dpi]
If I set a div with to
height:85vh;
the bottom of the element id off the screen by quite some amount (the for the page is only about 40px high....)
To get it to fit on the page I have to set it to
height:55vh;
Also this only works in portrait mode, if I turn the ipad to landscape it still seems to think the viewport is portrait even if I refresh the screen!
Setting vh to 85 works on android tablets, windows tablets, and desktop browsers (android and windows tablets also resize the viewport on rotating the device). Why is ipad acting so odd?
I am having this issue now too, and I guess the temporary fix until it is fully supported, would be a Javascript hack. Check the viewport height with Javascript, and use it to set the height of the elements. On tablets, there will be 2 viewport heights, one for each orientation, so I would do a recalculate when changing the orientation.
A good guide can be found here: http://davidwalsh.name/orientation-change
I have created a login page for iPad in HTML5 which contains one image, Userid, Password and a logout image.
When I open this page in iPad in portrait mode, all its contents moves on left side but in landscape mode it occupies the correct position.
Please someone suggest me how to adjust my HTML page in both landscape and portrait mode. ![ login page![enter image description here][1]
I would use CSS orientation media queries, #media screen and (orientation:portrait) {} and #media screen and (orientation:landscape) {}
For more info visit How to use CSS3 Orientation Media Queries
If you don't need to scroll you content on page you can try html {position:fixed;}