मुफ़्त पिक्सेल रूलर
अपनी स्क्रीन पर पिक्सेल में दूरियाँ मापें।
कैसे उपयोग करें
- दूरी मापने के लिए रूलर पर क्लिक-ड्रैग करें। रूलर पिक्सेल में वृद्धि दिखाता है।
- प्रारंभ और अंत बिंदु स्थानांतरित करने योग्य हैं, माप समायोजित करने के लिए उन्हें पकड़ें।
- क्षैतिज के बजाय लंबवत दूरियाँ मापने के लिए लंबवत मोड सक्षम करें।
- रूलर के नीचे अपना पिक्सेल गणना और अनुमानित भौतिक आकार देखें।
अक्सर पूछे जाने वाले प्रश्न
भौतिक आकार की गणना कितनी सटीक है?
भौतिक आकार आपके डिवाइस के पिक्सेल अनुपात और 96 DPI की अनुमानित गणना पर आधारित है। वास्तविक मॉनिटर DPI भिन्न होता है।
क्या मैं लंबवत दूरियाँ माप सकता हूँ?
हाँ। क्षैतिज के बजाय पिक्सेल में लंबवत दूरियाँ मापने के लिए लंबवत मोड सक्षम करें।
डिवाइस पिक्सेल अनुपात का क्या अर्थ है?
उच्च-घनत्व डिस्प्ले (जैसे Retina स्क्रीन) में पिक्सेल अनुपात 1 से अधिक होता है, अर्थात कई भौतिक पिक्सेल एक लॉजिकल पिक्सेल का प्रतिनिधित्व करते हैं।
यह Ruler क्या Measure करता है (और क्या नहीं)
यह एक free-form measuring stick है जो आपके browser tab में रहती है। Canvas पर drag करके CSS-pixel reading पाएं। यह browser viewport के अंदर paint की गई किसी भी चीज़ पर काम करता है (tab में open screenshot, inline view में Figma export, second tab में live web page), लेकिन यह desktop windows, native app UI, taskbar, या browser के बाहर OS-level compositor द्वारा paint की गई किसी भी चीज़ को measure नहीं कर सकता। Chrome DevTools या Page Ruler Redux की तरह element boundaries auto-detect भी नहीं कर सकता। वह different kind of tool है। Honest framing matters: यह ruler सही answer है जब आप browser के अंदर quick, install-free measurement चाहते हैं।
CSS Pixels Hardware Dots नहीं हैं
JavaScript और CSS जो pixel use करती हैं वह W3C-defined reference pixel है: «the visual angle of one pixel on a device with a device pixel density of 96 dpi and a distance from the reader of an arm's length.» लगभग 28 inches की nominal arm's length के लिए वह visual angle roughly 0.0213° है, या screen surface पर लगभग 0.26 mm। CSS pixel visual angle की unit है, hardware dot नहीं, intentionally device-independent ताकि 16 px font phone, laptop, और TV पर roughly same physical size appear करे।
सभी other absolute CSS lengths इससे anchored हैं: 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px। वह fixed conversion table exactly वही है जो «mm at 96 DPI» readout को true measurement की बजाय estimate बनाता है, नीचे देखें।
तीन Pixel Words जो Designers Confuse करते हैं
| पद | यह क्या Count करता है | यह कहां रहता है |
|---|---|---|
| CSS पिक्सेल | W3C reference pixel; वह unit जो JS और CSS layout के लिए use करती हैं | window.innerWidth, getBoundingClientRect(), हर CSS length |
| Device पिक्सेल | Panel पर actual addressable dot | screen.width × devicePixelRatio, monitor की native resolution |
| Image पिक्सेल | Raster file की intrinsic resolution | naturalWidth / naturalHeight एक <img> पर |
एक sentence में relationship: screen physical resolution ≈ CSS viewport size × device pixel ratio, और sharp image को intrinsic width ≥ rendered CSS width × DPR चाहिए। DPR 3 वाले phone पर 100 px CSS-sized logo को crisp दिखने के लिए कम से कम 300-pixel-wide source image चाहिए।
Device Pixel Ratio
Info panel में DPR readout window.devicePixelRatio report करता है: «the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.» Common values:
- 1.0: classic 96 DPI displays (older monitors, Windows machines at 100% scale)।
- 2.0: अधिकांश Retina MacBooks, 200% scale पर many 4K monitors।
- 2.5-3.5: modern phones। iPhone Pro models 3.0 report करते हैं; Android flagships अक्सर 2.625 / 2.75 / 3.5 पर होते हैं।
जानने योग्य दो behaviours: page zoom (Ctrl/Cmd + और −) DPR does change करता है, इसलिए zoom करते समय readout jump करेगा। Pinch-zoom underlying CSS pixel size change किए बिना rendered viewport magnify करता है, इसलिए नहीं करता। Apple ने 2010 में iPhone 4 पर Retina display introduce किया, और existing apps और pages को device pixels के both dimensions में double होने पर अपने previous size के quarter में shrink होने से बचाने के लिए, iOS ने «points» (इसके CSS-pixel equivalent) introduce किए। Web ने same model inherit किया: एक 2× CSS pixel चार device pixels map करता है।
Tap-Target Size Standards
Pixel ruler के सबसे useful कामों में से एक यह verify करना है कि buttons, links, और icons accessibility tap-target minimums meet करते हैं। तीन standards usually साथ आते हैं:
| Source | Minimum | Unit | ~भौतिक (96 DPI) |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | CSS px | ~6.4 × 6.4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | CSS px | ~11.6 × 11.6 mm |
| Apple HIG | 44 × 44 | pt | ~11.6 × 11.6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm (160 dpi संदर्भ) |
WCAG 2.2 ने October 2023 में 24 × 24 AA criterion add किया। W3C conformance test इसे कहता है: «It must be conceptually possible to draw a solid 24 by 24 CSS pixel square… completely within the target.» पांच exceptions हैं (spacing, equivalent, inline, user-agent control, essential), लेकिन general body UI को वह bar clear करना होगा। Older AAA criterion (2.5.5) 44 × 44 require करता है, Apple के HIG और roughly Material के 48 dp match करते हुए।
8-Pixel Design Grid
अधिकांश modern UI design 8-pixel base unit पर rest करता है (platform के depending पर «8-point grid» या «8 dp grid»)। Material Design 2 और 3 दोनों इस पर build करते हैं, icons और dense components के लिए smaller 4 dp adjustments के साथ। 8 का choice accidental नहीं है: यह common screen widths (320, 360, 375, 1280, 1440) में cleanly divide होता है, integer ratios से scale होता है (8, 16, 24, 32, 40, 48), और naturally 16 px default body type के साथ pair होता है। 4-pixel sub-grid fine alignment handle करता है।
Practical use: जब आप 14 px या 17 px का gap measure करते हैं, आपने likely CSS unit mistake catch की है। Intended value almost certainly 16 था। Pixel ruler off-grid spacing spot करने का fastest way है।
Browser Ruler कब Reach करें
- Shipped page पर Design QA। Live result को spec के विरुद्ध compare करें। दो cards के बीच gap 16 px है या 24 px?
- Tap-target verification। किसी button पर ruler drop करें यह confirm करने के लिए कि यह AA 24 px floor या AAA 44 px target meet करता है।
- Pasted mockup पर spacing audit। Tab में Figma export open करें, ruler drop करें, rhythm check करें।
- Responsive-breakpoint sanity checks। Viewport Width readout window resize करते समय live breakpoint indicator की तरह double करता है।
- Education। Junior developer को दिखाएं कि
devicePixelRatioउनकी अपनी machine पर क्या report करता है, और Cmd/Ctrl + zoom करने पर यह कैसे change होता है। - Accessibility audits। Icon-button hit areas, CSS pixels में line-length, और minimum text sizes verify करें।
Browser DevTools और Other Rulers
हर modern browser measurement tooling ship करता है, लेकिन यह developer panels के पीछे hidden है।
- Chrome DevTools: Command Menu open करें (Cmd/Ctrl+Shift+P), «rulers» type करें, Show rulers on hover select करें। किसी element पर hover करने पर viewport के top और left के साथ rulers appear होते हैं। Element selection से tied, free-form drag से नहीं।
- Firefox DevTools: Settings → Available Toolbox Buttons → Toggle rulers for the page enable करें। Ruler-toggle button DevTools toolbar में appear होता है; rulers page edges पर top-right में viewport dimensions के साथ overlay होते हैं।
- Figma / Sketch / Adobe XD: सभी में अपने canvas के अंदर ruler overlays हैं। Figma Shift+R से toggle करता है। ये file-bound हैं: ये अपने own document model के अंदर measure करते हैं, deployed web page नहीं।
- Browser extensions: Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions। सभी install और permissions require करते हैं; सभी browser तक confined रहते हैं। Useful यदि आपको element auto-detection चाहिए।
इस जैसा browser-tab ruler designers, QA reviewers, और content folk के लिए answer है जो DevTools panels या extension installs की बजाय single click चाहते हैं।
More Questions
Millimetre Readout कितना Accurate है?
यह estimate है। Conversion W3C-fixed 1 in = 96 CSS px relationship use करता है, accurate केवल तब जब आपका monitor really 96 DPI हो, browser zoom 100% हो, और OS scaling 100% हो। Actual monitors widely vary करते हैं: 24-inch 1080p panel roughly 92 ppi चलाता है, 27-inch 1440p around 109 ppi, 27-inch 4K around 163 ppi। mm number को order-of-magnitude estimate treat करें, कभी print-grade measurement नहीं। Real physical sizes के लिए, screen के विरुद्ध physical ruler hold करें।
Zoom करने पर Device Pixel Ratio क्यों Change होता है?
Page zoom (Cmd/Ctrl + या −) literally device pixel के relative CSS pixel का size change करता है, इसलिए उनके बीच ratio shift होता है। Touch devices पर Pinch-zoom differently काम करता है। यह underlying CSS pixel size change किए बिना rendered viewport magnify करता है, इसलिए DPR नहीं बदलता।
1366 × 768 Exactly 16:9 क्यों नहीं है?
क्योंकि यह quite नहीं है। 1366 ÷ 768 = 1.7786; true 16:9 1.7778 है। Simplified ratio actually 683:384 है। कई cheap laptop panels यह slightly off-spec resolution use करते हैं, जो एक reason है कि 1080p video कभी-कभी उन पर imperfectly downscale होता है।
क्या मैं Browser के बाहर Measure कर सकता हूं?
नहीं। Web page केवल अपने own browser tab के अंदर see और paint कर सकता है। Desktop windows, native app UI, या browser के बाहर किसी भी चीज़ measure करने के लिए, OS-level utility चाहिए: macOS Preview का «Show Inspector,» Windows का Snipping Tool dimensions overlay के साथ, या third-party screen ruler।
क्या कुछ Server को Send होता है?
नहीं। Ruler HTML5 canvas API से rendered है; viewport dimensions और DPR JavaScript से locally आते हैं; measurement readout आपके browser में computed होता है। Page एक बार load होने के बाद offline काम करता है।