14 replies to this topic

[bwelford]

My website, http://www.smmbc.ca/, has a 724px width banner Adsense ad in the header.

When viewed on an iPhone, I am told that this sets the width of the display unlike the view on my Android phone where the ad is cropped and the content of the web page takes up the full width ot the screen. This is true in either Portrait or Landscape mode.

The following article suggests that the problem is created because the Safari browser on the iPhone assumes a viewport of 980 px and scales to that.
http://westciv.com/s...ood_oil/iphone/

The solution suggested is to put the following code in the header:

<meta name="viewport" content="initial-scale=1" />

I have now done this.

Would anyone with an iPhone please check the website and see whether the page content is displayed using the full width of the screen and the banner ad is now cropped.

Any other thoughts on this would be most welcome.

[EGOL]

I just viewed it with my iPhone and the adsense leaderboard is still too wide on smmbc.ca

I have the same size adsense on my sites and they scale fine in an iphone without adding special code.

Edited by EGOL, 26 December 2011 - 03:51 PM.

[EGOL]

I see a div.....

<div style="clear:left;float:left;width:728px;margin:0 10px;">

Try changing that to

<div>

[bwelford]

Thanks, Egol. I've changed to the simple div now. Does that work better now?

[EGOL]

Phooey..... Now the ad is the proper size... but the rest of your page is squeezed into the left 100 pixels of the screen.

lookin' at the code

[EGOL]

I am just guessing here..... (I don't have much experience with design for mobile)

That div used to be....

<div style="clear:left;float:left;width:728px;margin:0 10px;">

Maybe the change should have been to.... (just dropping the width)

<div style="clear:left;float:left;margin:0 10px;">

======================================

The ad is also correctly sized on ipad.... but the rest of the site is squeezed to the left.. it is only about 90% as wide as the ad.

Edited by EGOL, 26 December 2011 - 09:19 PM.

[bwelford]

I think you were right to suggest removing the width, Egol, and I don't think the rest of the styling would affect the mobile width.

I've put back that line of code I mentioned above which uses a meta tag to adjust the viewport. Is the content now displaying full width in the screen with the right hand end of the adsense banner cut off. That's the appearance in an Android smartphone.

[EGOL]

Yes, Content is now full width and only the left half of the ad is visible.

On iPad, the content is full width with a small part of the ad beyond edge of screen.

[bwelford]

Thanks, Egol. That's the effect I was looking for.

[Dr.Marie]

On my iphone the banner ad extends way to far to the right, and the search box at the top extends to the right as well, but not as much as the ad.

Weird.

[DonnaFontenot]

Ideally, a small viewport should serve up a different, smaller ad.

[bwelford]

You're right, Donna. What would be the most effective way of doing that?

[bwelford]

BTW I have now corrected the Search text field problem. Before its width was specified as a fixed number, size="20". Now its width is specified by using style="width:90%;". This makes it 90% of the 28% width div located to the top right of the viewport.

I'm still looking for the best way of presenting an appropriately sized ad fitting the viewport of smart phones in either portrait or landscape mode.

[Dr.Marie]

Search looks much better now, although it may look better at perhaps 80% width? To me it looks like it has no border around the side edges at all.

Couldn't you do the same thing with your ad?

[bwelford]

Thanks, Dr. Marie. You're right, 80% does look better on a smart phone but is acceptable also on a Desktop PC.

I've struggled with how I might apply the same principle to a piece of javascript code that serves up an ad of specified dimensions. So far, no go.