?
Solved

iPhone-friendly Website

Posted on 2012-09-19
13
Medium Priority
?
575 Views
Last Modified: 2012-09-29
My test site http://test.dfigdesign.com/citrus created with a set the viewport width of 320px works perfectly on my DroidX but is super small on an Iphone.    As well, I added in the phone.css file -
body {
    width: 320px;
    font: 12pt Helvetica, sans-serif;
}
What am I doing wrong, please?
0
Comment
Question by:danfiggolf
  • 7
  • 6
13 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38415640
You need a doctype and an HTML tag.

Start with that, then see what happens

<!doctype HTML>
<HTML>
... Everything else...
</HTML>
0
 

Author Comment

by:danfiggolf
ID: 38416150
This code

- <!doctype HTML>
<HTML>
... Everything else...
</HTML>

is in the index.html file which uses either the desktop.css or phone.css or tablet.css.  If I use my DroidX cell phone it works as should.  If I use my desktop, it work perfectly.  

The problem is with an Iphone - the output is very narrow.  I've set the viewport width to the width of the device by adding this to my HTML file:

<meta name = "viewport" content = "width = device-width">
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38416247
<meta name="viewport" content="width=device-width; initial-scale=1;" />

and if you dont want people to be able to zoom in and out do this:


<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1;" />
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38416265
About my first comment - I was looking at your page on my phone (which is no longer there?)

The "view source" app on my phone omits all that html stuff, so that's why I didn't realize you had it. Just thought I would share that...

let me know if the initial-scale works for you.

cheers.
0
 

Author Comment

by:danfiggolf
ID: 38419833
adding initial-scale=1; maximum-scale=1; works great.

Now if I can keep the website from sliding left to right (keeping it fixed) I'm all set.

Do you know how keep the screen fixed?  Thanks -
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38420070
I think you can use "userscalable = 0".

You should google it. There might be some weirdness to it..

give this a try:
      
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38420204
the other thing you could try is to set the width to 100% instead of 320.

width:100%;
max-width:320px;
0
 

Author Comment

by:danfiggolf
ID: 38420553
Ah.. if I add the fixed position, I'm almost there but this freezes the up/down scrolling :(  This resolves the left to right movement.

#container {
      width: 100%;
      max-width: 320px;
      position: fixed;
}
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38420561
you shouldn't need fixed position. Make sure you don't have any sneaky px widths throwing you off somewhere.
0
 

Author Comment

by:danfiggolf
ID: 38420584
Here's my phone.css file  - do you see anything wrong with the widths?
@charset "utf-8";
#container {
	width: 100%;
	max-width: 320px;
}

#logo {
	height:auto;
	width:270px;
	background-image: url(../../images/sml_logo.png);
	margin-left:auto;
	margin-right:auto;
}
nav {
	padding-top:100px;
}
nav ul {
	font-size:24px;
}
nav ul a {
	width:97%;
	padding-right:0;
}
nav ul li {
	float:none;
}
nav ul li:hover {
	margin-top:0;
}
#maincontent {
	margin-top: 0;
	padding:0;
}
#vision {
	background-image:none;
	width: 280px;
	height:auto;
	font-size:16px;
	line-height:normal;
	padding-top:0;
}
/* Uncomment the declarations in the following rules to hide the images in the pods. */
.pod {
	width: 305px;
	/*padding-bottom:0;*/
}
/*.pod h1 {
	margin-bottom:0;
}*/
.podContent {
	width: 302px;
	height:180px;
	/*display:none;*/
}
/*#news .podContent {
	display:block;
}*/
footer p {
	margin-left:5px;
}
#facebookTwitter {
	margin-right:5px;
}

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38420597
this is what I see in my iphone simulator. I'm able to scroll up and down.

iphone-citrus
0
 

Author Comment

by:danfiggolf
ID: 38420618
Yes, that's when I attempted this code which is'nt correct in presentation.  

header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
}

Open in new window


If you look now - I've removed this css code and it looks like correct with no overlap, but will scroll horizontally.
header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
}

Open in new window

0
 

Author Closing Comment

by:danfiggolf
ID: 38447945
works perfectly now in the Iphone viewport because of this entry
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It’s time for spooky stories and consuming way too much sugar, including the many treats we’ve whipped for you in the world of tech. Check it out!
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question