Mobile Device Screen Viewports & Density Markdown Table Template
Common mobile device viewport widths, CSS logical pixels, physical resolutions, aspect ratios, and device pixel ratios (DPR).
Interactive Template Customizer
Edit cells, add rows, or sort — changes update the markdown liveColumn Architecture & Alignment Specification
Carefully chosen column alignments ensure optimal visual scannability across desktop and mobile screens:
| Column Header | Alignment | Delimiter Syntax | Design Rationale |
|---|---|---|---|
| Device Model | left | :--- | Standard left-aligned readable text & descriptions |
| CSS Viewport (px) | right | ---: | Aligns numeric scale, defaults, or magnitudes |
| Physical Resolution | right | ---: | Aligns numeric scale, defaults, or magnitudes |
| DPR Scale | center | :---: | Centers compact status symbols, flags, or tags |
| Aspect Ratio | center | :---: | Centers compact status symbols, flags, or tags |
Pro Tips for Mobile Device Screen Viewports & Density
- Right-align numerical viewport pixel dimensions.
- Center-align aspect ratios (`16:9`, `19.5:9`).
- Distinguish CSS logical pixels from physical device hardware pixels.
How to Deploy This Table Across Platforms
Paste raw Markdown into README.md. Leave one blank newline above and below for GFM compliance.
Paste directly into Live Preview mode. Use wikilinks ([[Note]]) inside cells for bidirectional linking.
Press Enter to make a fresh empty line block, then paste. Notion auto-transforms it into a native Simple Table block.
Standard GFM tables work out of the box in modern MDX engines. You can style them via custom CSS selectors.
Raw GFM Code
| Device Model | CSS Viewport (px) | Physical Resolution | DPR Scale | Aspect Ratio |
| :----------------------- | ----------------: | ------------------: | :-------: | :----------: |
| Apple iPhone 16 Pro | `402 x 874` | `1206 x 2622` | `@3x` | 19.5:9 |
| Apple iPhone 15 / 14 | `393 x 852` | `1179 x 2556` | `@3x` | 19.5:9 |
| Samsung Galaxy S24 Ultra | `412 x 915` | `1440 x 3120` | `@3.5x` | 19.5:9 |
| Google Pixel 8 Pro | `448 x 998` | `1344 x 2992` | `@3x` | 20:9 |
| Apple iPad Pro 12.9" | `1024 x 1366` | `2048 x 2732` | `@2x` | 4:3 |
| Standard Desktop FHD | `1920 x 1080` | `1920 x 1080` | `@1x` | 16:9 |Standard padded style with boundary pipes matching GitHub GFM parser specifications.
Platform Support
Syntax Formatting Rules
- Pipe Escaping: Use
\|for text with pipe symbols. - Multi-line Cells: Use
<br>for line breaks. - Monospace Text: Wrap variables or code in backticks (
`key`). - Empty Values: Use
—instead of leaving cells empty.
More Reference Markdown Templates
Browse all 50 templatesApplication Keyboard Shortcuts
Quick reference cheat sheet for application hotkeys, key combinations, execution contexts, and power-user shortcuts.
Markdown Table Delimiter Mechanics
Visual reference detailing delimiter row colon placement, column text alignment rules, minimum hyphens, and behavioral differences.
Status Indicators & Markdown Badges
Cheat sheet of copy-pasteable Unicode symbols, emojis, and shields.io badge syntax for table cells.
Frequently Asked Questions About Mobile Device Screen Viewports & Density
How can I highlight key combinations or code symbols in Mobile Device Screen Viewports & Density?
Use HTML <kbd> tags for keyboard shortcuts (e.g. "<kbd>Ctrl</kbd> + <kbd>C</kbd>") or backticks for syntax tokens. This creates distinct, elevated button-like pills in GitHub and documentation themes.
Where in my repository or project documentation should I place this Mobile Device Screen Viewports & Density table?
This template is specifically designed for responsive web design specifications, qa mobile testing matrices, css media query documentation. Place it inside your project's README.md, technical wiki, or developer portal. Always leave at least one blank newline before and after the table to ensure the GFM parser detects it properly.
Why is the "Device Model" column styled with left alignment?
The "Device Model" column functions as the primary key of this table. Setting it to left alignment establishes an anchor along the left reading margin, making it effortless for developers to scan down the list.
How do I add line breaks inside a single cell of this Mobile Device Screen Viewports & Density table?
Standard Markdown table rows cannot contain literal carriage returns. To create a multi-line list inside a cell, insert HTML <br> tags (e.g. "Item 1<br>Item 2<br>Item 3"). This keeps the entire entry in a single clean row without breaking column alignments.
How do I handle optional or missing values in Mobile Device Screen Viewports & Density?
Never leave table cells completely empty, as some strict Markdown parsers may collapse empty pipes. Instead, insert an em-dash ("—"), "N/A", or "None" to explicitly indicate that a value is not applicable.
Can I export this Mobile Device Screen Viewports & Density table into CSV, Excel, or HTML?
Yes. In the interactive toolkit above, you can edit your data and use our integrated export tools to convert this table directly into CSV, JSON, HTML <table>, or LaTeX with a single click.