You are developing an ASP.NET MVC application. Devices that use many different browsers will use the
application.
You have the following requirements:
Content must display correctly when a device is in landscape or portrait orientation.
Content must not scale when the device orientation changes.
Content must be displayed by using the maximum available screen space.
The application must render properly in Internet Explorer 8 or later versions.
You need to configure the application.
Which two actions should you perform? Each correct answer presents part of the solution.
A.
Use JavaScript to evaluate the window.innerWidth and window.innerHeight properties.
B.
Set the value of the width property for the viewport meta tag to device-width.
C.
Use CSS to target the HTML element on each page. Set the values of the width and height properties to
100%.
D.
Use CSS media queries to target screen size, device orientation, and other browser capabilities.
Explanation:
B: If you want the viewport width to match the device’s physical pixels, you can specify the following:
<meta name=”viewport” content=”width=device-width”>For this to work correctly, you must not explicitly force elements to exceed that width (e.g., using a width
attribute or CSS property), otherwise the browser will be forced to use a larger viewport regardless.
D: Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look
at the capability of the device.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and
Androids.https://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application
http://www.w3schools.com/css/css3_mediaqueries.asp