Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
How to make a aspx page look better on iPhone
Message
General information
Forum:
CSS
Category:
CSS 3
Miscellaneous
Thread ID:
01672943
Message ID:
01672962
Views:
46
Thank you for your input.
I didn't know that most phones are ~400 pixels wide.
My dilemma right now is what to specify for label and text box fonts and sizes. My first version does not specify them at all. But I think (guess) that this should be set to some values that will make it work on most mobile devices.

>The ViewPort tag should be added to just about every Web page and you should design the page assuming a 1:1 ratio. ViewPort 1.0 means that the page won't scale down to fix the size of the content.
>
>I think you always want to use 1 because that'll get you the size you'd expect. Anything else is to weird to keep straight IMHO. IOW, make 1.0 scale work. You know how wide the phone screen is (~400pixels) so make sure you don't have any elements that exceed that size with physical widths. Whenever possible use flex sizing (ie. width=100%) so it adjusts to the width of the document automatically, or - for inline text - wraps around.
>
>+++ Rick ---
>
>
>
>>Hi,
>>
>>I am working on an asp.net page that will be viewed on a mobile device (not on the desktop).
>>
>>I can view the page on my iPhone but all labels and text boxes look very small. Basically the entire form fits into the small upper-right corner. I can enlarge the form, by pinching the form with fingers. But this is not an acceptable approach.
>>
>>My question: Should I implement the page with a Bootstrap? Or should I simply try to increase the fonts of the ASP.NET page controls? If I increase the fonts, it may work on my iPhone. But I am not sure how well it will look on an Android or some other mobile device.
>>
>>What would you recommend?
>>
>>TIA
>>
>>UPDATE: Adding the viewport meta makes the page look better. Still, not perfect. Should I change the value of the initial-scale?
>>
>><meta name="viewport" content="width=device-width, initial-scale=1.0">
>>
>>
>>UPDATE 2. Value of 1.2 gives the best result on my "old" iPhone 6. But I need to find a way to set this value dynamically so that it works on any mobile device.
"The creative process is nothing but a series of crises." Isaac Bashevis Singer
"My experience is that as soon as people are old enough to know better, they don't know anything at all." Oscar Wilde
"If a nation values anything more than freedom, it will lose its freedom; and the irony of it is that if it is comfort or money that it values more, it will lose that too." W.Somerset Maugham
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform