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

A responsive design


And now we've come full circle. In Chapter 3, Introducing ASP.NET MVC 4, we talked about responsive design and what it means to develop apps that attempt to present themselves properly within any browser window, and to continually respond to changes in the size of the browser window or in the content that the page itself is displaying.

In the previous section, we learned there was a @media tag located in our Site.css file.

@media only screen and (max-width: 850px)

This media tag contains beneath it a set of styles that applies to all screen media types that have a maximum width of 850 pixels—that is to say most mobile devices.

We also learned that our _Layout.cshtml file contains the viewport meta tag telling the mobile browser to render the page in its native resolution. Let's take a moment to put it all together.

When we load any page in a web browser that has a resolution of 850 pixels or less, we will get one set of styles applied to make the page usable at that resolution...