Automatically changes Font size when I orient the phone in iPhone website

[Hemen]

Hello,

Is there any one can help me out for the following page.

I have one page which contains the plain text, and I am using the java
script to check the orientation. and change the width of the div as it
oriented.

But when I show first time, as vertically it looks ok.
Now when I orient it to horizontally the font automatically becomes
bigger and feet to screen size.
And then again I orient to vertically, the font is as usual (bigger -
as shown in horizontally) and does not refeet to the vertical screen
size.

So my issue is that, I want to feet the font in the vertical screen
size, when I turned it to horizontally -> vertically, it looks weird.

Following is my example :


demo.css

<style>
body {
padding:0;
margin:0;

}
.show_normal,
.show_flipped{
width:320px;

}
.show_left,
.show_right{
width:480px;
}
</style>





demo.js

function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case 0:
contentType += "normal";
break;

case -90:
contentType += "right";
break;

case 90:
contentType += "left";
break;

case 180:
contentType += "flipped";
break;
}
document.getElementById("page_wrapper").setAttribute("class",
contentType);
location.reload();
}

window.onorientationchange=updateOrientation;



demo.html

<div id="page_wrapper" class="show_normal">

<p style="padding-left:7px; padding-right:7px;padding-top:5px;margin-
top:0px" align="justify">
<font face="verdana" size="2">
Semaphore has deep understanding of software development services and
has industries best talent pool to give quality software development
outsourcing services.
If you are Software Development Company, and want a strong technology
partner for outsourcing your projects, then you have reached to a
right place. Semaphore has unique delivery models to extend its
services to companies like yours. Semaphore forms strong synergies to
enable its partners cum clients to be more competitive on their local
grounds. An offshore development service of Semaphore has helped many
companies like yours to reap benefits of outsourcing.
If you are software consulting company or software consultant, we can
work with you hand in hand to propose, estimate, develop and deliver
software development projects. Our local presence in US, UK and
Netherlands helps us to visit your client's site for better co-
ordination and customer satisfaction.
</font>

</p>
</div>

When I reload to vertically it does not re feet to the screen.
Why? and how can i slove it?
Please help me out of this problem...


Thanks in advance.

Hemen

[RobG]

On Aug 24, 9:02 pm, Hemen <hemen.punj...@googlemail.com> wrote:
> Hello,
>
> Is there any one can help me out for the following page.
>
> I have one page which contains the plain text, and I am using the java
> script to check the orientation. and change the width of the div as it
> oriented.
>
> But when I show first time, as vertically it looks ok.
> Now when I orient it to horizontally the font automatically becomes
> bigger and feet to screen size.
> And then again I orient to vertically, the font is as usual  (bigger -
> as shown in horizontally) and does not refeet to the vertical screen
> size.
>
> So my issue is that, I want to feet the font in the vertical screen
> size, when I turned it to horizontally -> vertically, it looks weird.

Don't mess with the display at all. If the user wants a bigger text
size and landscape, let them do it, no javascript required.

[...]

>
> When I reload to vertically it does not re feet to the screen.
> Why? and how can i slove it?
> Please help me out of this problem...

Don't mess with the layout in the first place, let the iPhone do its
thing.


--
Rob

[Hemen Punjani]

Hi Rob,

Thanks for your reply,
I have not change the font..
It automatically increases the font size when it orient as horizontally...

thanks,
Hemen

[Ahrjay]

I had the same issue and found this buried in the developer
documentation:
-webkit-text-size-adjust: none;

That should force it to keep the same font size no matter what
orientation.

Cheers,
Ryan

On Aug 25, 10:31 pm, Hemen Punjani <hemen.punj...@googlemail.com>
wrote:

[Hemen Punjani]

Hi Ahrjay,

Thanks a lot... :-)
Its working fine...
by writing following...
<body style="-webkit-text-size-adjust:none">

Thanks,
Hemen.

[RobG]

On Aug 25, 10:31 pm, Hemen Punjani <hemen.punj...@googlemail.com>
wrote:

> Hi Rob,
>
> Thanks for your reply,
> I have not change the font..
> It automatically increases the font size when it orient as horizontally...

Yes, that's what it is designed to do, you are trying to stop it. I
rotate the phone to landscape because it makes the text bigger. If you
stop it from getting bigger, I'll just get annoyed and not use the
site.

There are likely others like me.

--
Rob

[Ahrjay]

On Aug 28, 4:43 pm, RobG <robg...@gmail.com> wrote:
> Yes, that's what it is designed to do, you are trying to stop it. I
> rotate the phone to landscape because it makes the text bigger. If you
> stop it from getting bigger, I'll just get annoyed and not use the
> site.

Completely agree with you on that but it certainly has it's uses.
In my case it was for a copyright message that appears on the bottom
right of a map that would resize to quite large when the phone was
rotated to landscape.