Scribd
Upload
16 views6 pages

CS420 Week 2

Uploaded by

raj331192
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views6 pages

CS420 Week 2

Uploaded by

raj331192
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 6

CS420 - Web Development

for Portable Devices

Week 2
Bilal Bin
Umar
Mobile Screen Sizes and Viewports
 Mobile Screen Sizes:
o Phones and tablets have varying resolutions and pixel densities.
o Importance of designing for multiple sizes to ensure usability.
 Viewport in Mobile:
o A viewport is the visible area of a webpage on a device.
o The meta viewport tag controls how a webpage scales and fits on mobile.
 Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

o This ensures the page adjusts according to the device’s screen size.
Fixed vs Flexible Layouts
 Fixed Layouts:
o Set to a specific width, often causing content to overflow or be clipped on smaller screens.
o Example of a fixed-width layout causing horizontal scrolling on mobile.
 Flexible (Responsive) Layouts:
o Automatically adjust to the screen size using CSS techniques like flexbox or grid.
o Adapts layout based on available space.
 Example (CSS Grid):
.container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

o This code automatically resizes columns based on the screen width, making it responsive.
Rescaling and Text Reflow
 Rescaling:
o Content resizes according to the device’s dimensions.
o Ensures elements remain proportional across devices.
 Text Reflow:
o Adjusts how text wraps and fits within the screen width.
o Improves readability on smaller devices.
 Responsive Typography:
o Use units like em, rem, or vw for font sizes that scale.
o Example:
body {

font-size: 4vw; /* Font scales with viewport width */

}
Viewport Units and Scaling
 Viewport Units:
o vw (viewport width), vh (viewport height), vmin, and vmax.

o Useful for dynamic layouts that scale with the device size.
 Example:
 .element {

width: 50vw; /* Takes up 50% of the viewport width */

height: 50vh; /* Takes up 50% of the viewport height */}

 Scaling Settings:
o Use the meta tag to set zoom properties and prevent unwanted zooming.
o Example:
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1.0, user-scalable=no">

o This restricts users from zooming the page, ideal for mobile apps.
Separate Layouts for Mobile and Desktop

 Responsive vs Separate Layouts:


o In simple websites, a responsive design that adapts to all screen sizes is ideal.
o For more complex applications, separate mobile and desktop layouts may enhance
performance and usability.
 Example:
o E-commerce apps often have a different user experience on mobile vs desktop.

You might also like