homepage to fit into ipad screen:how?

[paldo]

I'm trying to make my homepage ipad friendly. As all pages of my site have long text, I want to fit my page into the screen so that there is no horizontal scrolling bar. Following some advise from the internet the page layout should be 750px wide (the ipad screen is 768px). My friend checked it on an ipad 3rd generation, but the result is not what I'm expecting. My page does not fill out the screen, only partially. Can someone tell me why and what I have to do? Thank you in advance.

Here an example of the page to test:

http://www.cspm-study-help.info/test750px.html

And here my CSS code:

<style type="text/css">

body{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
	
	font-size:12px;
	
	
}
#content {
  width: 750px ;
  margin-left: auto ;
  margin-right: auto ;
  border:1px solid;
  border-color:#CCCCCC;
  padding-left:4px;
}

table, td, th td
{

	


padding-left:10px;
padding-right: 10px;
font-size: 12px;
text-align:left;



}

.Q{	/* Styling question */
	/* Start layout CSS */
	color:#FFF;
	font-size:12px;
	background-color:#317082;
	width:740px;
	margin-bottom:2px;
	margin-top:2px;
	padding-left:2px;
	padding-right:2px;
	background-image:url('images/bg_answer.gif');
	background-repeat:no-repeat;
	background-position:top right;
	

	/* End layout CSS */

	overflow:hidden;
	cursor:pointer;
}
.A{	/* Parent box of slide down content */
	/* Start layout CSS */
	border:1px solid #317082;
	background-color:#E2EBED;
	width:740px;
	padding-left:1px;
	padding-right:1px;
	

	/* End layout CSS */

	visibility:hidden;
	height:0px;
	overflow:hidden;
	position:relative;

}
.A_content{	/* Content that is slided down */
	padding:1px;
	font-size:12px;
	position:relative;
}

</style>
<script type="text/javascript">

[acme.mail.order]

The magic Google search terms you are looking for are `css @media ipad` and `viewport ipad`

[mark hunte]

Quote: Originally Posted by acme.mail.order The magic Google search terms you are looking for are `css @media ipad` and `viewport ipad`

Very handy.

Just inserting

</ meta name="viewport" content="width=device-width" /> 

Adjust the page width.

This may help me with an issue I am having.

Thanks acme.mail.order

[mclbruce]

What happens if you remove, or comment out, all references to width? Or try width=auto or width=100%

[paldo]

Quote: Originally Posted by mclbruce What happens if you remove, or comment out, all references to width? Or try width=auto or width=100%

Yes, I put it to auto and it works an ipad. I'm now looking to fix it for the iphone, the actual CSS is not iphone friendly.

http://www.cspm-study-help.info/test750px.html

Here the CSS that works on ipad but not on iphone:

****** name="viewport" content="width=device-width" />

<style type="text/css">

body{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
	
	font-size:12px;
	
	
}
#content {
  width: auto ;
  margin-left: auto ;
  margin-right: auto ;
  padding-left:4px;
  padding-right:4px;
}

table, td, th td
{

	


padding-left:10px;
padding-right: 10px;
font-size: 12px;
text-align:left;



}

.Q{	/* Styling question */
	/* Start layout CSS */
	color:#FFF;
	font-size:12px;
	background-color:#317082;
	width:auto;
	margin-bottom:2px;
	margin-top:2px;
	padding-left:2px;
	padding-right:2px;
	background-image:url('images/bg_answer.gif');
	background-repeat:no-repeat;
	background-position:top right;
	

	/* End layout CSS */

	overflow:hidden;
	cursor:pointer;
}
.A{	/* Parent box of slide down content */
	/* Start layout CSS */
	border:1px solid #317082;
	background-color:#E2EBED;
	width:auto;
	padding-left:1px;
	padding-right:1px;
	

	/* End layout CSS */

	visibility:hidden;
	height:0px;
	overflow:hidden;
	position:relative;

}
.A_content{	/* Content that is slided down */
	padding:1px;
	font-size:12px;
	position:relative;
}

</style>

Any good hints?

[mclbruce]

HTML is supposed to adapt to all page sizes by default. You shouldn't need any tags at all specifying width.

try getting rid of all of your width: auto tags

also, try getting rid of the viewport meta tag

[paldo]

Quote: Originally Posted by mclbruce HTML is supposed to adapt to all page sizes by default. You shouldn't need any tags at all specifying width. try getting rid of all of your width: auto tags also, try getting rid of the viewport meta tag

With evidence your suggestion without viewport and width is the best. Thank you.

Paldo

[mclbruce]

You are welcome. You can also use percentages in your margins/padding instead of px. Percentages will translate better across different page sizes.

Back in the days before CSS I would just put everything in a table, surpress displaying the table borders, and declare the width of the table at 80 percent or so.

[dripfeed]

For iPhone 4 (which is smaller than iPhone 5) the view port width is 320. Vou might consider creating a single liquid site layout to suite all mobile devices instead of creating one for each and every device.