7. Mobile Web Development

Question 1

In what year did mobile browser access surpass desktop browser access?

Answer 1

2019

Question 2

What is the most-often used mobile web browser in North America?

Answer 2

Safari

Question 3

What are the three main techniques for implementing mobile websites?

Answer 3

1. Separate websites
2. Dynamic serving
3. Responsive web design

Question 4

A(n) ____ website changes the display of elements at specific browser widths, whereas a(n) ____ will smoothly adjust the width of the container to fit the browser width

Answer 4

adaptive, responsive

Question 5

A screen ____ is software that simulates how mobile device screens operate.

Answer 5

emulator

Question 6

The ____ ratio is the ratio between device pixels and logical pixels

Answer 6

device pixel ratio (DPR)

Question 7

A DPR of 2 means ____ logical pixel is ____ device pixels wide and ____ device pixels tall

Answer 7

1, 2, 2

Question 8

A logical pixel is also called a ____ pixel

Answer 8

device-independent

Question 9

Is the CSS “px” unit a logical or a device pixel?

Answer 9

A logical pixel

Question 10

In what three ways does Chrome’s DevTools allow you to emulate network conditions?

Answer 10

1. You can disable caching
2. You can use network throttling to simulate slower networks like 2G or 3G or simulate being offline
3. You can change the user agent string to any number of browser user agents

Question 11

A browser’s ____ is the visible area of a webpage, not including the address bar, bookmark bar, tabs, etc

Answer 11

viewport

Question 12

The ____ specifies viewport properties that affect what the browser’s viewport displays

Answer 12

viewport meta element

Question 13

What are three common properties in the viewport \<meta> element ?

Answer 13

1. width - The viewport width, which is typically set to device-width, the device’s screen width
2. initial-scale - The initial zoom level, which is typically set to 1 so the webpage is initially zoomed in at 100%
3. user-scalable - A boolean value that, when set to no, prevents the user from zooming in and out

Question 14

The viewport properties are specified in the viewport meta element’s ____ attribute, separated by commas

Answer 14

content

<meta name="viewport" content="width=device-width, initial-scale=1">

Question 15

A ____ is a percentage of the browser viewport’s width or height

Answer 15

viewport unit

Question 16

What does 1vw and 1vh refer to, respectively?

Answer 16

1vw is 1% of the viewport’s width, and 1vh is 1% of the viewport’s height

Question 17

What does vmin and vmax refer to, respectively?

Answer 17

1vmin is 1vw or 1vh, whichever is smaller

1vmax is 1vw or 1vh, whichever is larger

Question 18

What are the two general strategies web developers follow to design websites for desktop, tablet, and mobile?

Answer 18

1. Graceful degradation - Design the desktop website first and modify the design to fit smaller screens.
2. A “mobile first” design methodology that begins with designing the website for the smallest device and then adapts the design for larger screens.

Question 19

A CSS ____ is a combination of ____ and optionally one or more ____ that evaluate to true or false

Answer 19

media query, media type, media feature expressions

Question 20

A(n) ____ is a device category that a media query applies to

Answer 20

media type

Question 21

What are three different media types?

Answer 21

1. all - all devices (default value if no media type is listed)
2. print - For printers and documents viewed on screen in print preview mode
3. screen - Intended for screens

Question 22

In the context of responsive web design, a(n) ____ is a characteristic of a browser, device, or environment.

Answer 22

media feature

Question 23

What are the main different media features?

Answer 23

1. aspect ratio - Viewport’s width-to-height ratio
2. height - Viewpoart’s height
3. width - Viewport’s width
4. orientation - Viewport’s orientation
5. resolution - Device’s pixel density

Question 24

What does the media feature min-width:200px mean?

Answer 24

It means that the width is >= 200px. The min- and ‘max-` prefixes are used for >= and <=, respectively.

Question 25

Media queries are often used in ____ elements and in ____.

Answer 25

`\`, stylesheets

Question 26

A media query in a `\` is specified with the ____ attribute.

Answer 26

`media` When the media query matches (evaluates to true), the link's stylesheet is downloaded

Question 27

A media query in a stylesheet is specified with the ____ at-rule

Answer 27

`@media` An at-rule is a CSS statement that starts with the @ character and instructs the CSS engine how to behave. When a media query in a stylesheet matches, the @media's inner rules are defined

Question 28

A ____ is the screen width that activates a media query

Answer 28

breakpoint Ex: In the media query @media screen and (max-width: 800px) 800 is the breakpoint

Question 29

Media query breakpoints do not work properly unless what happens?

Answer 29

The viewport `meta` element needs to set the viewport width to the device width ``

Question 30

DPR is often designated with a(n) ____, so a standard screen is ____, a 2 DPR screen is ____, etc.

Answer 30

"x", 1x, 2x

Question 31

A ____ is an image that scales to fit different layouts in a responsive website

Answer 31

responsive image

Question 32

Which image type is ideal for responsive images?

Answer 32

SVG (Scalable Vector Graphics)

Question 33

An SVG image is a vector image that is defined with ____.

Answer 33

XML

Question 34

What two tags can be used to display an SVG image?

Answer 34

1. `\` with a `src` attribute that includes the .svg file 2. '\

Question 35

The `\` ____ attribute specifies which image should be displayed for specific DPR values.

Answer 35

`srcset`

Question 36

An image's ____ attribute specifies one or more pairs of media conditions and relative image sizes.

Answer 36

`sizes` `sizes="(min-width: 600px) 30vw` `(min-width: 400px) 50vw` `100vw"` This value specifies a media condition (viewport width must be at least 400px wide) and a relative image size (30% of the viewport width). The media condition must be omitted for the last (default) image size.

Question 37

Another way browsers match images with device characteristics is with the ____ element.

Answer 37

`\`

Question 38

The `\` element contains one or more ____ elements that specify a media condition and image

Answer 38

`\` An `\` element must also be specified as the image to download and display if none of the images are selected