Jump to content

Cre8asiteforums

Web Site Design, Usability, SEO & Marketing Discussion and Support

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

I see a div.....

 

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

 

Try changing that to

 

<div>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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. :(

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×