Making ASP.NET Web Application to Display Size Compatibility Into Smart Phone or Tablet Using CSS3
In this article I will explain how to make an ASP.NET web application a responsive U.I.
Normally in mobile when we run website pages,
most off the pages are not fitted in to the screen that means its not proper
aligned, we have to scroll horizontally lots.
It is same like when we drag a browser and squeeze it small the web pages are
getting cutting out, like the below picture:
Now I am sharing you a smart trick.
If you don't have any mobile simulator (windows, apple, android) to test your
web application, don't worry, just drag your browser and squeeze it just like a
mobile phone width size say 320px.
Then if your web page fitted on it ,means all your page content are not getting
cut-of. You win the jackpot.
So for achieving this we have to design our web pages control in such a manner
that it will fit the width, alignment in any media screen size.
Now here the css3 power comes (normally we know css2).
In css3 we have a property name "MEDIA QUERY".
"by using Media Queries, presentations can be tailored to a specific range of
output devices without changing the content itself ".......that means we will
apply this css
into our web controls (for e.g div, p, table). So the control will adjust its
width according to the device.
Note: The css3 supports only chrome, mozilla 4+,safari,I.E 9.
The media query syntax will be
@media screen and (max-width:999px)
Now I will create a small web application where we will implement this css3media
Step 1: Create an ASP.NET webapplication.
Step 2 : Now in our application we have a Parent DIV say
Inside this div we have the below 3 child div
Under Each DIV we have different content say text, image like the below code
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
Main heading here
<img class ="feature-image"
src="heart_and_rose.png" alt="Holi" />
A rose is a woody
perennial.................range of garden roses.
he leaves are borne alternately
on the stem.............are evergreen or nearly so.
Create a style sheet file into your web project (say mquery.css) and make style
sheet for each image, div including parent div just like the below code segment:
margin: 5 0 0 25px;
border: thick outset #008000;
margin: 0 0 10px 10px;
Now in the stylesheet apply the media query css3 property like the below code
screen and (max-width:380px)
width: 300px; }
See here first I have mentioned the mediascreen max width property with 380px.
Normally in fullscale browser the pix will be 1200+px.
So when we squeeze the browser and drag it width small and make it similar like
smart phone screen width that time the browser screen width pix will be (below
After that I am doing the main div(#container) size it into 300 px and also
making other div (nav,content,extrax) and ".feature-image" into width=auto,
float =none, margin=0.
Now after running the application in chrome browser and make the browser width
just like tablet width by making it sqiz, the application will look like the
See Here the Image with content are not getting cutting out.
Now we will make the browser width more small (300px) like a standard smart
phone screen width by dragging the browser. See the result like the below
See the width of the browser. Its just similar to any standard smart phone
And see all the content in the web pages are not getting cutoff.
Its fits the alignment width of the browser even the image also. Its al about
the css3 magic of media screen.
Dont test this application into any I.E browser that lower than 9 ver.css3
supports only I.E 9 browser.
I have atatched the project file also here.
So in this article we get to know Making ASP.NET webapplication display size
compatibility into any Smart Phone device or tablet using CSS3.