Amazon desktop website has min-width:1000px rule on its subelements like header etc. but it fits into the iPhone 6 viewport (which is 980px wide) without any horizontal scrollbars when I do "Request Desktop Site" on Chrome. How do they do it?
Related
I have a 320px x 50px adsense unit I am trying to display on an iPhone 6. (Or any mobile browser with a width more than 320px - iPhone 3Gs was 320px wide.) The ad unit is way too small.
I tried using CSS, media queries, and other things. No dice.
I tried using Google's Responsive ads. No dice.
I looked at a bunch of sites with the Google Chrome device mode and found a site that had a 320px wide add, but it was taking the full viewport width on an iPhone 6!
How can I get the ad to display on the full width of the page?
With all of the different device screen sizes, now there is a way to set the viewport size on mobile browsers.
<meta name="viewport" content="width=device-width">
This will scale the 320px width ad unit to fit the full width of the device.
More reading.
try this add it you your CSS
img
{
max-width:100%;
}
I think will work with you.
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]
It seems that video element sizing behavior is different between mobile to desktop:
on http://www.quirksmode.org/html5/tests/video.html
on desktop chrome its width is about 35% of the browser. on ipad chrome is about 10%
any ideas why? where can i get the rules to this?
thanks much
Lior
Apple documents this non-standard behavior in this document, which is worth reading because it covers some other things you're going to have to worry about with video on the iPad.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1
Default Height and Width on iOS
Because the native dimensions of a video are not known until the movie metadata loads, a default height and width of 150 x 300 is allocated on devices running iOS if the height or width is not specified. Currently, the default height and width do not change when the movie loads, so you should specify the preferred height and width for the best user experience on iOS, especially on iPad, where the video plays in the allocated space.
Also, have a look at this related question:
Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
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
This mobile website:
http://www.tomorroworld.com/instarea/
Looks good both on iPhone 4 (Retina Screen) and regular iPhone screens. But on Android phones, it's too much zoomed in. How can I fix this easily?
This is what the viewport tag looks like:
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,user-scalable=0"/>
Consider converting your widths to be based on percentages rather than pixels and then let them scale down in smaller devices. You could also add in some media queries for additional layout control at smaller sizes.
Using viewport as you have is essentially hard-coding your page width at 320px for all mobile devices - works great for older iphones but not for many other devices.