Different headersize for different smartphones

YellowGreenMedia · 29th Jun 2012, 05:47 AM

I am looking for a way to have different headersizes for different smartphones, the problem with size 100% is that the header gets distored in some of the browsers and basically make your site look like crap.

So what is the best way to get around that?

Thanks

Dave

Quentin · 29th Jun 2012, 08:09 AM

height="auto"

Quentin

rlhurst · 30th Jun 2012, 07:18 PM

Originally Posted by YellowGreenMedia

I am looking for a way to have different headersizes for different smartphones, the problem with size 100% is that the header gets distored in some of the browsers and basically make your site look like crap.

So what is the best way to get around that?

Thanks

Dave

I know your question was for header sizes for different smart phones... but you have the same problem using one phone.. in portrait and landscape mode. Up to 33% size difference. One way to rectify that is to use css for phone orientation. That way, you can design two different sized images to use. One in portrait mode and another in landscape mode. I've set up an example site to show you. Here's the url, and qr code.

orientation.yobiz.mobi

YellowGreenMedia · 1st Jul 2012, 12:32 AM

Thanks for the info i wil check it out, and your right when you into landscape you have the same problems...

RoiJB · 3rd Jul 2012, 11:12 AM

Dave,

Which browsers or phones are you seeing this distortion on and please describe the distortion, obviously you could make different versions of your header images in Photoshop for each phone.

You would then have to use a script to detect the actual browser and serve up the image for that device.

29th Jun 2012, 05:47 AM	#1
YellowGreenMedia Dave Zegers War Room Member Join Date: 2011 Location: The Hague Posts: 559 Thanks: 229 Thanked 207 Times in 118 Posts	Different headersize for different smartphones Share on: I am looking for a way to have different headersizes for different smartphones, the problem with size 100% is that the header gets distored in some of the browsers and basically make your site look like crap. So what is the best way to get around that? Thanks Dave

29th Jun 2012, 08:09 AM	#2
Quentin Web Marketing For Profit War Room Member Join Date: 2002 Location: Brisbane Posts: 2,895 Thanks: 8 Thanked 1,162 Times in 528 Posts Blog Entries: 10	Re: Different headersize for different smartphones Share on: height="auto" Quentin
	DIY Product Creation Online Business Training on How To Create Products to sell online Plus Lots More.

1st Jul 2012, 12:32 AM	#4
YellowGreenMedia Dave Zegers War Room Member Join Date: 2011 Location: The Hague Posts: 559 Thanks: 229 Thanked 207 Times in 118 Posts	Re: Different headersize for different smartphones Share on: Thanks for the info i wil check it out, and your right when you into landscape you have the same problems...

3rd Jul 2012, 11:12 AM	#5
RoiJB Warrior Member War Room Member Join Date: 2011 Posts: 22 Thanks: 24 Thanked 28 Times in 24 Posts	Re: Different headersize for different smartphones Share on: Dave, Which browsers or phones are you seeing this distortion on and please describe the distortion, obviously you could make different versions of your header images in Photoshop for each phone. You would then have to use a script to detect the actual browser and serve up the image for that device.