English
Menu

Web Technology Basics

For a page with responsive design that also supports smartphones, which of the following is the main purpose of writing <meta name="viewport" content="width=device-width, initial-scale=1"> in <head>?

  1. ATo make the width used for laying out the page match the device's screen width and display it without shrinking
  2. BTo have the server automatically regenerate images to match the resolution of the device's screen
  3. CTo display the page only in PC browsers and refuse access from smartphones
Show answer and explanation

Answer: A. To make the width used for laying out the page match the device's screen width and display it without shrinking

Without this setting, a smartphone browser lays out the page at a wide width that assumes a page designed for PCs (generally around 980px) and then shrinks it to fit on the screen. width=device-width makes the layout width match the device's screen width, and initial-scale=1 sets the initial zoom to 100%. On top of that, CSS media queries (for example @media (max-width: 600px)) switch the layout and text size according to the screen width.

  • A. Correct. It makes the layout width match the screen width and displays the page at a zoom level that does not shrink it.
  • B. To have a browser choose an image that fits the screen, the srcset attribute of the img element and the like are used. The viewport setting does not make the server generate images.
  • C. The viewport setting decides the display width and zoom; it has no function for refusing access.
Practice this topic Back to topic

Books on Web Technology Basics Ad

As an Amazon Associate I earn from qualifying purchases.

More Web Technology Basics questions

  1. The response for a "my page" whose content differs for each user is given Cache-Control: private, max-age=60. Which of the following correctly describes the effect of this setting?
  2. When a web server compresses responses with gzip or Brotli before sending them, which of the following generally gains the least reduction in transferred data from compression?
  3. 1.5 MB of text data is compressed with gzip to one third of its size and sent. The bandwidth is 10 Mbps and the RTT is 100 ms, and before the data starts to be sent, the TCP connection, the TLS handshake and the HTTP request take three round trips in total. Assume 1 MB = 10^6 bytes, and ignore compression and decompression time, headers and waiting caused by TCP congestion control. Which of the following is closest to the time until all the data has been received?
  4. A CDN receives 2,000 requests per second, and its cache hit ratio rises from 90% to 98%. The response time is 20 ms on a hit, and 200 ms on a miss because the content is fetched from the origin server and returned; only requests that miss reach the origin server. Which of the following is the combination of the number of requests reaching the origin server and the average response time after the ratio reaches 98%?
  5. Among Core Web Vitals, the metrics of a web page's user experience, which of the following does CLS (Cumulative Layout Shift) represent?