E-Commerce Development Mobile Commerce 2 — Questions and Answers
Question 1: Which CSS media query breakpoint is most commonly used to target mobile devices with screens up to 768px wide?
- @media (max-width: 768px) (Correct answer)
- @media (min-width: 768px)
- @media (screen: mobile)
- @media (device: handheld)
Correct answer: @media (max-width: 768px)
max-width: 768px is the standard breakpoint for targeting tablets and mobile devices in responsive design.
Question 2: What is the primary benefit of using a Progressive Web App (PWA) for mobile commerce over a native app?
- No app store submission required (Correct answer)
- Better GPU access
- Unlimited local storage
- Mandatory push notifications
Correct answer: No app store submission required
PWAs can be installed directly from the browser without going through an app store, lowering the distribution barrier.
Question 3: Which payment method is specifically designed for one-tap checkout on mobile devices by storing card details with the browser?
- Payment Request API (Correct answer)
- REST checkout API
- OAuth 2.0 payment
- PCI inline form
Correct answer: Payment Request API
The Payment Request API lets browsers surface stored payment credentials for frictionless one-tap checkout.
Question 4: A mobile e-commerce site scores 3.8s on Largest Contentful Paint (LCP). According to Google, this rating is:
- Needs Improvement (Correct answer)
- Good
- Poor
- Critical
Correct answer: Needs Improvement
Google's LCP threshold is Good ≤2.5s, Needs Improvement 2.5–4s, and Poor >4s, so 3.8s falls in Needs Improvement.
Question 5: Which mobile-specific HTML attribute on an <input> field triggers a numeric keypad instead of the full keyboard?
- inputmode="numeric" (Correct answer)
- type="numpad"
- keyboard="number"
- pattern="\d*" only
Correct answer: inputmode="numeric"
inputmode="numeric" tells the browser to display a numeric keyboard without restricting input validation.
Question 6: In mobile UX, what is 'thumb zone' design?
- Placing key actions within natural thumb reach on a handheld device (Correct answer)
- Hiding controls behind a hamburger menu
- Applying 44px tap targets only to the header
- Detecting if the user is right- or left-handed via sensors
Correct answer: Placing key actions within natural thumb reach on a handheld device
Thumb zone design positions primary actions in the lower-center area of the screen where thumbs comfortably reach.
Question 7: Which service worker caching strategy serves content from cache first and updates it in the background — ideal for mobile product catalog pages?
- Stale-While-Revalidate (Correct answer)
- Cache-Only
- Network-First
- Race (cache vs network)
Correct answer: Stale-While-Revalidate
Stale-While-Revalidate instantly serves cached content and silently fetches an update for the next visit, balancing speed and freshness.
E-Commerce Development Mobile Commerce 2
Which CSS media query breakpoint is most commonly used to target mobile devices with screens up to 768px wide?