optimize html code for different screens

Question

0.00/5 (No votes)

See more:

hi guys
i have a general question,i have back end developer of an asp.net web site,i'm familiar with html and css but i'm not an expert.
my site works fine on my laptop but when i browsed it with smaller screen laptops or with mobile devices,i see that for example some components(inputs,images,...) do not fit the screen or their are on top of each other!
it seems that this html page only looks fine on 16inch screens
how can i optimize html for different screens that they all look the same,and in next step how can i optimize for mobile devices
tanx

Posted 12-Dec-12 3:27am

Arash Khangaldi

Add a Solution

Comments

bbirajdar 12-Dec-12 9:37am

There are thousands of ways to get the markup screwed and I cannot guess which might be your favourite unless you show us the HTML you have written...

You dont need to optimize, but write a compatible markup for all browsers and screen sizes

2 solutions

Solution 2

you can use the percent for width of you page. Because when you want to use fixed pixel then the resolution mismatch with your given pixel.

one thing, when you use percent for width or height then you must use all the tools with percent. I mean, dont use like some tools with pixel and some tools with percent.

thanks

Posted 12-Dec-12 3:43am

Member 10510822

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sisir patro · Accepted Answer · 2012-12-12T03:43:00

Hi Arash Khangaldi,

This is totally dependent upon your design structure.

Let me share my knowledge with you.

1. If you are designing a page using the height and width of any

or with the values in "pixel" then while the window is adjusted the page and the controls that you have set for your page will try to adjust with the given portion but you have given a fixed length for the page controls. so that will then be distorted.

2. If you are designing the page with the values defined in "%" then your page controls and the value of the width and height of your controls will be adjusted in "%".
This will not distort your page.

This takes the whole page as 100% and divide the length among themselves.

For better understanding view this link.
{ Difference between em, % and px; }
percentage vs pixels?

Thanks