Home » Microsoft » 70-486 v.2 » Which two actions should you perform?
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.
Correct Answer: BD
Explanation/Reference:
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.
References:
https://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application http://www.w3schools.com/css/css3_mediaqueries.asp
D is wrong. According to the link in the explanation media queries can’t be used in <IE9. This conflicts with the requirement stated in the question. The same thing applies to window.innerWidth/innerHeight. Correct answer should be BC.