Book Image

ASP.NET MVC 4 Mobile App Development

By : Andy Meadows
Book Image

ASP.NET MVC 4 Mobile App Development

By: Andy Meadows

Overview of this book

The ASP.NET MVC 4 framework is used to build scalable web applications with the help of design patterns and .NET Framework. The Model-View-Controller (MVC) is a design principle which separates the components of a web application. This separation helps you to modify, develop, and test different components of a web application. ASP.NET MVC 4 Mobile App Development helps you to develop next generation applications, while guiding you to deal with the constraints the mobile web places on application development. By the end of the book, you will be well versed with all the aspects of mobile app development. ASP.NET MVC 4 Mobile App Development introduces you to developing mobile web apps using the ASP.NET MVC 4 framework. Walking you through the process of creating a homebrew recipe sharing application, this book teaches you the fundamentals and concepts relevant to developing Internet-ready mobile-enabled web apps. Through the sample application, you will learn how to secure your apps against XSS and CSRF attacks, open up your application to users using third party logins such as Google or Facebook, and how to use Razor, HTML 5, and CSS 3 to create custom views and content targeting mobile devices. Using these custom views, you will then learn how to create web apps with a native mobile device feel using jQuery mobile. By the end of the book, you will be presented with a set of challenges to prove to yourself that you now have the skills to extend your existing web applications to the mobile web or create new mobile web apps.
Table of Contents (23 chapters)
ASP.NET MVC 4 Mobile App Development
Credits
About the Author
Acknowledgment
About the Reviewers
www.PacktPub.com
Preface
7
Separating Functionality Using Routes and Areas
Index

The viewport meta tag


The last piece of information that is rather important when talking about designing for the mobile web is the viewport meta tag.

Most mobile browsers assume, and rightfully so, that any page they attempt to render is authored for and intended to be viewed in a desktop browser. In this scenario, mobile browsers will render the page at 980 pixels wide (typically, but some browsers may use an alternative resolution) and then scale the rendered page to fit on the screen of the device. For devices of lower resolution, even our emulated Samsung Galaxy S II in our Opera Mobile emulator with a width of 480 pixels, this means the page is rendered and then scaled down to less than 50 percent of its original size. This makes for some hard reading and leaves users frustrated.

The viewport meta tag, currently in our _Layout.cshtml file as <meta name="viewport" content="width=device-width" /> is a meta tag used to instruct mobile devices as to the resolution and scaling factor...