How to Make a Mobile version of website in ASP.Net?

Question

User120603341 posted

Hello guys,

I am new to ASp.Net and now building a website in .Net Framework 4 using visual studio 2010. The thing i want to do is to make a mobile version of website i am making. I have downloaded the mobile toolkit and created several pages to use for mobile. Now i dont know where to run that mobile simulator in VS 2010. Plus i dont have an idea what path should i follow to make my mobile website. I know its not too difficult (Just like the normal web forms i suppose). But i dont know how to test and how to make it work. Can anyone provide me some help with it. Some sample or some clear explanation that where to run that simulator etc etc etc..... (Searched on internet already but found only the links to VS 2008)

Sorry for my english and sorry if that question sounds stupid.

Answer 1

User1943143334 posted

Hi,

General ASP.NET works absolutely fine in all Mobile broswers! Now a days mobile browser are capable of displaying HTML5 content too!

You can check the following links!

Emulators

http://roopeshreddy.wordpress.com/2010/07/25/mobile-development-in-asp-net/

http://ripple.tinyhippos.com/

http://roopeshreddy.wordpress.com/2011/10/11/apple-iphoneipad-simulator/

http://roopeshreddy.wordpress.com/2011/02/05/developing-asp-net-web-applications-for-windows-phone-7/

http://jquerymobile.com

Hope it helps u...

Answer 2

User-1246064872 posted

Ist of all the main thing is Css file. Which display the content according to the Device .You can use this

Namespace

MobileEnabledWebFormsApp.Mobile

.CSS file

body
{
    background-color: transparent;
    font-size: 0.9em;
    text-align: center;
}

.page
{
    width: auto;
    margin: 0;
    border-width: 0;
}

p
{
    margin-bottom: 0em;
    line-height: 1.2em;
    margin-left: 40px;
}

.header h1
{
    padding: 0 0 0 0.5em;
    color: White;
    line-height: 1.6em;
    font-size: 1.4em;
}

.title
{
    float: none;
}

.loginDisplay
{
    text-align: left;
    padding: 0 0 0.5em 10px;
    font-size: 0.8em;
}

.menu
{
    font-size: 0.9em;
}

input.textEntry
{
    width: auto;    
}

input.passwordEntry
{
    border: 1px solid #ccc;
    width: auto;    
}

div.accountInfo
{
    width: auto;
}

Answer 3

User120603341 posted

great info, i am marking your anser, and will be back with you if there is any problem :)