logo-dw

Go Back   Dreamweaver Club Forums > Community Talk > Suggestions and Feedback
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-21-2012, 11:08 AM   #1
cocoonfx
cocoonfx's Avatar
 
Join Date: Nov 2006
Location: Tamworth,UK
Posts: 577
Default css for iPhones and Tablets

Hi Guys

Could I recommend we have a section on coding/css for iPhones and smart phones etc... ??
cocoonfx is offline   Reply With Quote
Old 02-22-2012, 12:11 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 9,334
Default

a tutorial would be good, and maybe a sticky link to it in the existing css forumI think
__________________
If you're happy and you know it shake your meds!
different style links examples


Bali Villas Flights to Bali
edbr is offline   Reply With Quote
Old 02-22-2012, 06:18 AM   #3
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,105
Default

JC has tackled the basics here; http://www.dreamweaverclub.com/mobile-friendly.php and there is some good stuff about it on his site. Perhaps a board would be good though as I have been playing with it recently and it seems like a bit of a minefield!
Corrosive is offline   Reply With Quote
Old 02-22-2012, 07:57 AM   #4
cocoonfx
cocoonfx's Avatar
 
Join Date: Nov 2006
Location: Tamworth,UK
Posts: 577
Default

Minefield I think you're right. I had a play last night on my site my original css works perfectly in on an iphone but I thought about creating a mobile.css and get the browser to detect the iPhone. I used the viewport

HTML Code:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
and it screwed the layout and even playing with the mobile.css it didn't work that well )

I will check out the tutorial but as soon as I trained myself I will possibly help with a tutorial.
cocoonfx is offline   Reply With Quote
Old 02-22-2012, 04:24 PM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,836
Default

Quote:
Originally Posted by cocoonfx View Post
I thought about creating a mobile.css and get the browser to detect the iPhone. I used the viewport
The viewport meta tag is not for detecting an iPhone. It was created by Mobile Safari so that developers could control the viewports size and scale on an iDevice, but now it's supported by many other mobile browsers.
If you don't use this meta tag, then the mobile browser will sqeeze your, lets say 960px wide website, into the small screen and than users can only read your content by pinching/zooming and horizontal scrolling.

If you need to detect specifically for instance an iPhone than this can be done with User Agent sniffing.

Developing only for the iPhone is not that difficult. Developing for a wide range of devices with their different browsers and capabilities is a pain in the *beep*, but on the other hand it's also challenging.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 03-06-2012, 04:42 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 9,334
Default

I was looking at this lately and on one site i tried the
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
and as a 3 column site it lost all the centre content, as a quick fix i used
<meta name="viewport" content="width=device-width, minimum-scale=0.6, maximum-scale=1.0">

and it was better. i was actually working for android rather than iphone, just some food for thought
__________________
If you're happy and you know it shake your meds!
different style links examples


Bali Villas Flights to Bali
edbr is offline   Reply With Quote
Old 03-06-2012, 08:13 AM   #7
cocoonfx
cocoonfx's Avatar
 
Join Date: Nov 2006
Location: Tamworth,UK
Posts: 577
Default apples and blackberries

I have also found that using the max-width causes issues with apple devices and also using % with widths. I am a mac user and I can only simulate for iPhone and iPad and I found a client had a blackberry 9680 and the layout was screwed, even though the site sort of worked in iPhone. Anyone know of any good blackberry simulators as the one from RIM doesnt work! well on a mac )
cocoonfx is offline   Reply With Quote
Old 03-06-2012, 11:08 AM   #8
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,105
Default

I have a Torch if you need any layouts testing. Pretty much anything below that in the BB pecking order doesn't seem to honour the viewport meta tag anyway.
Corrosive is offline   Reply With Quote
Old 03-12-2012, 12:46 PM   #9
cocoonfx
cocoonfx's Avatar
 
Join Date: Nov 2006
Location: Tamworth,UK
Posts: 577
Default

I have found the viewport works well on iPhones and iPads however they put an extra margin so if you set content to the size of the site it should centre properly
cocoonfx is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:38 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com