Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Iphone Display Problem

iphone smart phone display screen width

  • Please log in to reply
14 replies to this topic

#1 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9008 posts

Posted 26 December 2011 - 02:56 PM

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.

#2 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 5419 posts

Posted 26 December 2011 - 03:51 PM

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.


#3 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 5419 posts

Posted 26 December 2011 - 03:56 PM

I see a div.....

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

Try changing that to

<div>

#4 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9008 posts

Posted 26 December 2011 - 06:49 PM

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

#5 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 5419 posts

Posted 26 December 2011 - 09:02 PM

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

#6 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 5419 posts

Posted 26 December 2011 - 09:14 PM

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.


#7 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9008 posts

Posted 26 December 2011 - 09:31 PM

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.

#8 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 5419 posts

Posted 26 December 2011 - 09:58 PM

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.

#9 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9008 posts

Posted 27 December 2011 - 12:20 AM

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

#10 Dr.Marie

Dr.Marie

    Light Speed Member

  • Invited Users For Labs
  • 582 posts

Posted 27 December 2011 - 10:13 AM

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.

#11 DonnaFontenot

DonnaFontenot

    Peacekeeper Administrator

  • Site Administrators
  • 3804 posts

Posted 27 December 2011 - 10:23 AM

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

#12 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9008 posts

Posted 27 December 2011 - 12:46 PM

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

#13 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9008 posts

Posted 27 December 2011 - 05:02 PM

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.

#14 Dr.Marie

Dr.Marie

    Light Speed Member

  • Invited Users For Labs
  • 582 posts

Posted 27 December 2011 - 05:05 PM

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?

#15 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9008 posts

Posted 27 December 2011 - 09:30 PM

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



RSS Feed


Also tagged with one or more of these keywords: iphone, smart phone, display, screen width

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users