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.
Related
I read that most media queries use viewport width to determine whether your are on a phone, tablet or PC. I am building an image grid with 1000s of small thumbs in an endless grid. Each thumb is 125px and on my laptop (MacBook 13") I can easily fit 9-10 thumbs in one row - which gives a fine user experience. If I take the same code to a nexus 5, which has 1080px across I get 6-7 thumbs, which is a bad user experience. the nexus is 6-7 cm across and the MacBook is 25'ish cm - big difference.
My approach would be to detect whether the device is a mobile or pc and the scale the thumbs - big ones for mobile (say 250px) and small for pc (125px).
But how do I detect the device. If I use width I basically have to go with a min-width of 1100px to catch most new phones. I could also go with resolution, mobile phones generally have higher DPIs than PC/laptops.
Or do I have this completely wrong?
I am writing the app in React.
It's not that your Nexus 5 renders webpages at 1080px wide, it's that your site is not performing responsively to fit your phone screen, so it's rendering as a zoomed-out desktop site.
You need to add this viewport meta tag to your site's <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Once that's in, your Nexus 5 should render webpages at something closer to 400px wide, and you can base your media queries around that.
Here's how you'd make your thumbnails 125px wide for screens under 480px wide:
#media (max-width: 480px) {
img {
width: 125px;
}
}
An explanation of layout viewport and visual viewport can be found here.
I have read here and here that one should use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
if one wants to optimize a webpage for mobile devices.
I would like to understand the consequences of this on the iphone4 in landscape mode. I would think that the following happens:
width=device-width
The device width of the iphone4 is 320px in landscape (see here) even though the iphone 4 has a screen-width of 480px in landscape mode. So the layout viewport is set to 320px.
initial-scale=1.0 This sets 1 CSS pixel to 1 device pixel (see here). Now since the iphone4 has a width of 480 device pixel, this implies for me that the visual viewport is 480px wide.
Thus, the layout viewport is set to 320px and the visual viewport to 480px. Doesn't that imply that the webpage is only shown on the first 320 px of the visual viewport and the remaing 160px are left blank?
To give a more concrete example: Consider the following webpage
<!DOCTYPE html >
<html >
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
</head>
<body>
<div style='background-color:red;width:100%'>Test</div>
</body>
</html>
then in my understanding, this should only fill the screen of the iphone4 in landscape to 320/480=66,66% with red, because the layout viewport would get the length of 320px and since the div-size is relative to the viewport, width:100% is the same as width:320 px, see here:
the CSS layout, especially percentual widths, are calculated relative
to the layout viewport
I am assuming that I am wrong and that the iphone4 will probably display the above page in landscape with 100% red - but why? Have I misunderstood something?
Remark: I found this question Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1? which is closly related to my question but with no answer.
Mozilla's documentation of the viewport meta tag explains this behavior fairly well (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
By extension, if width=device-width resolves to 320 but the screen is 480 pixels wide, the browser will also expand the layout viewport to 480.
Also from the same document:
Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape.
I think that behavior has changed somewhat in recent versions of iOS, but it can be a confounding factor in figuring out what is going on, as on some devices the layout viewport will sometimes be different when a page is loaded in landscape vs. when the page is loaded in portrait and then rotated to landscape.
Mozilla goes on to say:
If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
I'm not a fan of this technique; I think the cure is worse than the disease in most cases.
It is because it is rotating page rendered in portrait mode. You will have to redraw page. Here is similar question .
I think that the problem you have is confusing the device-width and screen/browser resolution.
as in the example you post:
These pixels have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.
In other words, width/height mirrors the values of document. documentElement. clientWidth/Height, while device-width/height mirrors the values of screen.width/height. (They actually do so in all browsers, even if the mirrored values are incorrect.)
they are retina display and the difference is only in bigger pixel rendering from the iphone, so the browser will rendere full-screen even with 320px device-width in landscape. the big problem with iphone is that this difference don't change between portrait/landscape.
and
You can set the layout viewport’s width to any dimension you want, including device-width. That last one takes screen.width (in device pixels) as its reference and resizes the layout viewport accordingly.
where the device pixel (The screen) is different from visual viewport
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
there device-width will have always 100% screen width.
<meta name="viewport" content="width=320px;initial-scale=1.0" />
there you should test if there are no changes on iphone or the DIV will extend out/gap of the screen in landscape
i think this source is correct only using media-query with device-width (not visible on iphone), because if you use normal media query you can see that the effective pixel-ratio of the browser rendering changes from 320px to 480px
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.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
To fit my WP website for mobiles I use
#media screen and (max-device-width: 780px) {}
However, to fit everything properly I have to use giant values, like font-size: 4em;, header {height: 200px;} (when it's 100 on the desktop version). Is it normal?
The main problem is with Gallery plugin - by default thumbs have size e.g. 200x300, and on the mobile version they are really tiny!
Or maybe there is a better way to make a website mobile?
If I had to guess, I'd say you are not setting your viewport
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Nowadays, most mobile phones have a very high dpi; for instance, the iphone 6 plus has a full 1080p display, so when you make something 100px tall, it is only 1/19 of the screen height.
By setting the viewport to the device-width, you are telling the browser to render the page using a more standard dpi (for instance, the iphone 6 would be something like 424x600ish). That way, all of your content automatically scales.
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]
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.