Tag

viewport

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 28, 2024 · Frontend Development

Understanding Browser Distance and Size Properties for Frontend Development

This article explains how to obtain and calculate various distance and size properties in the browser—such as pageY, clientY, offsetY, scrollY, getBoundingClientRect, scrollTop, offsetTop, clientTop, and height metrics—using React event handlers and plain JavaScript, with practical code examples.

DOMJavaScriptReact
0 likes · 11 min read
Understanding Browser Distance and Size Properties for Frontend Development
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 24, 2023 · Frontend Development

Screen Size Compatibility and Responsive Design in Front-End Development

This article explains the challenges of screen‑size compatibility for front‑end developers, analyzes current device resolutions and aspect ratios, and provides practical solutions such as viewport meta tags, media queries, adaptive units, responsive layouts, device simulation tools, and safe‑area handling for modern browsers and mobile devices.

flexboxgridmedia queries
0 likes · 17 min read
Screen Size Compatibility and Responsive Design in Front-End Development
Sohu Tech Products
Sohu Tech Products
Jan 6, 2021 · Mobile Development

Mobile Adaptation Techniques for Vue.js Development

This article explains how to adapt Vue.js web pages for diverse mobile devices by configuring the viewport meta tag, using relative and viewport units, applying flex layouts, handling fixed positioning issues, implementing route transitions, and leveraging useful plugins and component registration methods.

JavaScriptMobile DevelopmentVue.js
0 likes · 19 min read
Mobile Adaptation Techniques for Vue.js Development
Xueersi Online School Tech Team
Xueersi Online School Tech Team
Jul 19, 2019 · Frontend Development

Mobile Web Adaptation: Principles, Terminology, Viewport, and Common Solutions

This article explains the fundamentals of mobile web adaptation, covering key concepts such as screen resolution, pixel density, device pixel ratio, viewport types, and presents several practical solutions—including flexible+rem, CSS3 media queries with vw, and pure vw approaches—along with implementation details and case studies.

Mobilefrontendrem
0 likes · 20 min read
Mobile Web Adaptation: Principles, Terminology, Viewport, and Common Solutions
Baidu Tech Salon
Baidu Tech Salon
Jul 9, 2014 · Frontend Development

Mobile Web App Adaptive Design: Understanding PPI/DPI and Viewport Solutions

Understanding mobile web app adaptive design requires grasping PPI/DPI concepts, the variable meaning of CSS pixels, and using viewport meta tags—especially target-densitydpi and initial-scale—to achieve 1:1 rendering across Android density buckets and iOS Retina screens while balancing layout and asset sizing.

DPIPPIadaptive layout
0 likes · 8 min read
Mobile Web App Adaptive Design: Understanding PPI/DPI and Viewport Solutions