7. Mobile Web Development Flashcards
In what year did mobile browser access surpass desktop browser access?
2019
What is the most-often used mobile web browser in North America?
Safari
What are the three main techniques for implementing mobile websites?
- Separate websites
- Dynamic serving
- Responsive web design
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
adaptive, responsive
A screen ____ is software that simulates how mobile device screens operate.
emulator
The ____ ratio is the ratio between device pixels and logical pixels
device pixel ratio (DPR)
A DPR of 2 means ____ logical pixel is ____ device pixels wide and ____ device pixels tall
1, 2, 2
A logical pixel is also called a ____ pixel
device-independent
Is the CSS “px” unit a logical or a device pixel?
A logical pixel
In what three ways does Chrome’s DevTools allow you to emulate network conditions?
- You can disable caching
- You can use network throttling to simulate slower networks like 2G or 3G or simulate being offline
- You can change the user agent string to any number of browser user agents
A browser’s ____ is the visible area of a webpage, not including the address bar, bookmark bar, tabs, etc
viewport
The ____ specifies viewport properties that affect what the browser’s viewport displays
viewport meta element
What are three common properties in the viewport \<meta> element ?
-
width- The viewport width, which is typically set todevice-width, the device’s screen width -
initial-scale- The initial zoom level, which is typically set to 1 so the webpage is initially zoomed in at 100% -
user-scalable- A boolean value that, when set tono, prevents the user from zooming in and out
The viewport properties are specified in the viewport meta element’s ____ attribute, separated by commas
content
<meta name="viewport" content="width=device-width, initial-scale=1">
A ____ is a percentage of the browser viewport’s width or height
viewport unit
What does 1vw and 1vh refer to, respectively?
1vw is 1% of the viewport’s width, and 1vh is 1% of the viewport’s height
What does vmin and vmax refer to, respectively?
1vmin is 1vw or 1vh, whichever is smaller
1vmax is 1vw or 1vh, whichever is larger
What are the two general strategies web developers follow to design websites for desktop, tablet, and mobile?
- Graceful degradation - Design the desktop website first and modify the design to fit smaller screens.
- A “mobile first” design methodology that begins with designing the website for the smallest device and then adapts the design for larger screens.
A CSS ____ is a combination of ____ and optionally one or more ____ that evaluate to true or false
media query, media type, media feature expressions
A(n) ____ is a device category that a media query applies to
media type
What are three different media types?
-
all- all devices (default value if no media type is listed) -
print- For printers and documents viewed on screen in print preview mode -
screen- Intended for screens
In the context of responsive web design, a(n) ____ is a characteristic of a browser, device, or environment.
media feature
What are the main different media features?
-
aspect ratio- Viewport’s width-to-height ratio -
height- Viewpoart’s height -
width- Viewport’s width -
orientation- Viewport’s orientation -
resolution- Device’s pixel density
What does the media feature min-width:200px mean?
It means that the width is >= 200px. The min- and ‘max-` prefixes are used for >= and <=, respectively.
Media queries are often used in ____ elements and in ____.
\<link>, stylesheets
A media query in a \<link> is specified with the ____ attribute.
media
When the media query matches (evaluates to true), the link’s stylesheet is downloaded
A media query in a stylesheet is specified with the ____ at-rule
@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
A ____ is the screen width that activates a media query
breakpoint
Ex: In the media query
@media screen and (max-width: 800px)
800 is the breakpoint
Media query breakpoints do not work properly unless what happens?
The viewport meta element needs to set the viewport width to the device width
`<meta name="viewport" content="width=device-width, initial-scale=1">`
DPR is often designated with a(n) ____, so a standard screen is ____, a 2 DPR screen is ____, etc.
“x”, 1x, 2x
A ____ is an image that scales to fit different layouts in a responsive website
responsive image
Which image type is ideal for responsive images?
SVG (Scalable Vector Graphics)
An SVG image is a vector image that is defined with ____.
XML
What two tags can be used to display an SVG image?
-
\<img>with asrcattribute that includes the .svg file - ’<svg>’
The \<img> ____ attribute specifies which image should be displayed for specific DPR values.
srcset
An image’s ____ attribute specifies one or more pairs of media conditions and relative image sizes.
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.
Another way browsers match images with device characteristics is with the ____ element.
\<picture>
The \<picture> element contains one or more ____ elements that specify a media condition and image
\<source>
An \<img> element must also be specified as the image to download and display if none of the <source></source> images are selected
