Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

D276 - Web Development Foundations > 7. Mobile Web Development > Flashcards

7. Mobile Web Development Flashcards

1
Q

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

A

2019

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

Safari

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are the three main techniques for implementing mobile websites?

A
  1. Separate websites
  2. Dynamic serving
  3. Responsive web design
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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

A

adaptive, responsive

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

emulator

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

device pixel ratio (DPR)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

1, 2, 2

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

A logical pixel is also called a ____ pixel

A

device-independent

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

A logical pixel

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

A
  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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

viewport

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

viewport meta element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A
  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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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

A

content

<meta name="viewport" content="width=device-width, initial-scale=1">
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

viewport unit

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

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

17
Q

What does vmin and vmax refer to, respectively?

A

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

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

18
Q

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

A
  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.
19
Q

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

A

media query, media type, media feature expressions

20
Q

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

A

media type

21
Q

What are three different media types?

A
  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
22
Q

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

A

media feature

23
Q

What are the main different media features?

A
  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
24
Q

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

A

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

25
Q

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

A

\<link>, stylesheets

26
Q

A media query in a \<link> is specified with the ____ attribute.

A

media

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

27
Q

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

A

@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

28
Q

A ____ is the screen width that activates a media query

A

breakpoint

Ex: In the media query

@media screen and (max-width: 800px)

800 is the breakpoint

29
Q

Media query breakpoints do not work properly unless what happens?

A

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

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

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

A

“x”, 1x, 2x

31
Q

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

A

responsive image

32
Q

Which image type is ideal for responsive images?

A

SVG (Scalable Vector Graphics)

33
Q

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

A

XML

34
Q

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

A
  1. \<img> with a src attribute that includes the .svg file
  2. ’<svg>’
35
Q

The \<img> ____ attribute specifies which image should be displayed for specific DPR values.

A

srcset

36
Q

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

A

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.

37
Q

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

A

\<picture>

38
Q

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

A

\<source>

An \<img> element must also be specified as the image to download and display if none of the <source></source> images are selected

D276 - Web Development Foundations (7 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions