{"id":166,"date":"2013-03-17T22:27:23","date_gmt":"2013-03-17T21:27:23","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=166"},"modified":"2013-04-14T17:35:51","modified_gmt":"2013-04-14T15:35:51","slug":"uebersicht-ueber-verschiedene-fachbegriffe-aus-dem-bereich-retina-display-optimierung","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/17\/uebersicht-ueber-verschiedene-fachbegriffe-aus-dem-bereich-retina-display-optimierung\/","title":{"rendered":"\u00dcbersicht \u00fcber verschiedene Fachbegriffe aus dem Bereich Retina-Display-Optimierung"},"content":{"rendered":"

Hier eine kurze \u00dcbersicht \u00fcber die verschiedenen Fachbegriffe, ihre deutsche \u00dcbersetzung (so vorhanden) sowie eine kurze Erkl\u00e4rung.<\/p>\n\n\n\n\n\n\n\n\n
Englisch<\/th>\nDeutsch<\/th>\nErkl\u00e4rung<\/th>\n<\/tr>\n<\/thead>\n
device pixels<\/strong>\/ physcial pixels<\/strong>\/ hardware pixels<\/strong><\/td>\nGer\u00e4tepixel<\/strong>\/ physikalische Pixel<\/strong><\/td>\nKleinste Darstellungseinheit auf dem Screen des Endger\u00e4tes und somit die Art von Pixel, die gemeint ist wenn es um die Aufl\u00f6sung (also z.B. 640 x 1136px beim iPhone 5) geht.<\/td>\n<\/tr>\n
device independend pixels<\/strong> (dips)\/ CSS pixels<\/strong>\/ virtual pixels<\/strong>\/ logical pixels<\/strong><\/td>\nger\u00e4teunabh\u00e4ngiges Pixel<\/strong>\/ Referenzpixel<\/strong>\/ CSS-Pixel<\/strong>\/ virtuelle Pixel<\/strong><\/td>\nAbstrakte optische Referenzeinheit, die zum Angeben von Ma\u00dfen im CSS (width, height…) benutzt wird.<\/td>\n<\/tr>\n
device pixel ratio<\/strong><\/td>\n(mir ist keine deutsche \u00dcbersetzung bekannt)<\/td>\nGibt das Verh\u00e4ltnis von Ger\u00e4tepixeln zu ger\u00e4teunabh\u00e4ngigen Pixeln wieder. Beim iPhone 5 betr\u00e4gt sie beispielsweise 2 (640 Ger\u00e4tepixel \/ 320 dips).<\/td>\n<\/tr>\n
pixel density<\/strong><\/td>\nPixeldichte<\/strong>\/ Punktdichte<\/strong><\/td>\nErrechnet sich aus Wurzel(Breite\u00b2 + H\u00f6he\u00b2) \/ Bildschirmdiagonale in Zoll; Beispiel am iPad mini Wurzel(1024\u00b2 + 768\u00b2) \/ 7.9″ = 162.025316456 dpi (dpi-Rechner<\/a>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Links<\/h3>\n

Pixel density<\/a>
\nA Pixel Identity Crisis<\/a>
\nA pixel is not a pixel is not a pixel<\/a>
\ndevicePixelRatio<\/a>
\nMore about devicePixelRatio<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Hier eine kurze \u00dcbersicht \u00fcber die verschiedenen Fachbegriffe, ihre deutsche \u00dcbersetzung (so vorhanden) sowie eine kurze Erkl\u00e4rung. Englisch Deutsch Erkl\u00e4rung device pixels\/ physcial pixels\/ hardware pixels Ger\u00e4tepixel\/ physikalische Pixel Kleinste Darstellungseinheit auf dem Screen des Endger\u00e4tes und somit die Art von Pixel, die gemeint ist wenn es um die Aufl\u00f6sung (also z.B. 640 x 1136px […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[77],"tags":[49,47,50,45,46,52,51,56,54,55,53,48,44],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-2G","jetpack-related-posts":[{"id":153,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/18\/mit-mediaqueries-auf-verschiedene-pixeldichten-reagieren\/","url_meta":{"origin":166,"position":0},"title":"Mit Mediaqueries auf verschiedene Pixeldichten reagieren","author":"Paul-Christian Abla\u00df","date":"18. M\u00e4rz 2013","format":false,"excerpt":"Um Websites f\u00fcr Endger\u00e4te mit unterschiedlicher Pixeldichte bzw. device pixel ratio zu optimieren, eignet sich der resolution\u2013Mediaquery sehr gut: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {} W\u00e4hrend -webkit-min-device-pixel-ratio das Verh\u00e4ltnis von Ger\u00e4tepixeln zu ger\u00e4teunabh\u00e4ngigen Pixeln abfragt, checkt min-resolution ob eine Punktdichte von mindestens 192dpi erreicht\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":535,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/02\/18\/color-stops-in-verlaeufen-an-der-selben-position-bei-unterschiedlich-hohen-elementen\/","url_meta":{"origin":166,"position":1},"title":"color stops in Verl\u00e4ufen an der selben Position bei unterschiedlich hohen Elementen","author":"Paul-Christian Abla\u00df","date":"18. Februar 2014","format":false,"excerpt":"Das Problem In einem aktuellen Projekt kann auf Unterseiten einer Website ein Hintergrundverlauf zugeschaltet werden, der von transparent zu schwarz \u00fcbergeht. Das ist erst einmal kein Problem, immerhin k\u00f6nnen mittlerweile sowohl kreisf\u00f6rmige als auch lineare Verl\u00e4ufe mit Css umgesetzt werden. Der Ultimate CSS Gradient Generator ist ein wunderbares Tool zur\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":297,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","url_meta":{"origin":166,"position":2},"title":"Sass-Mixin: rem mit px-Fallback","author":"Paul-Christian Abla\u00df","date":"26. Mai 2013","format":false,"excerpt":"Ich nutze im Css so gut wie ausschlie\u00dflich rem (siehe dazu auch CSS-Tipp: rem als Einheit f\u00fcr Schriftgr\u00f6\u00dfe nutzen) als Einheit und trug das ben\u00f6tigte Pixel-Fallback bisher h\u00e4ndisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin f\u00fcr Sass von Hans\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":451,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/09\/28\/os-x-10-8-4-firefox-24-und-die-scrollbars-in-der-responsive-design-view\/","url_meta":{"origin":166,"position":3},"title":"OS X 10.8.4, Firefox 24 und die Scrollbars in der Responsive Design View","author":"Paul-Christian Abla\u00df","date":"28. September 2013","format":false,"excerpt":"Als ich am vergangenen Dienstag den frisch auf Version 24 aktualisierten Firefox benutze und mich daran machte, mein aktuelles Projekt in der Responsive Design View zu bearbeiten, wunderte ich mich etwas: Zuvor nebeneinander flie\u00dfende Elemente brachen mit einem Mal um. Beim Blick in das Layout-Fenster vom Firebug fiel mir auf,\u2026","rel":"","context":"In "Browser"","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":485,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/01\/16\/maskierungszeichen-in-css\/","url_meta":{"origin":166,"position":4},"title":"Maskierungszeichen in Css","author":"Paul-Christian Abla\u00df","date":"16. Januar 2014","format":false,"excerpt":"Gelegentlich besteht die Notwendigkeit, bestimmte Zeichen(folgen) in Css zu maskieren, um zu verhindern dass sie gem\u00e4\u00df ihres urspr\u00fcnglichen Einsatzzweckes ausgef\u00fchrt werden. Beispielsweise, wenn gr\u00f6\u00dfere Codebl\u00f6cke mit dazugeh\u00f6rigen Kommentaren auskommentiert werden sollen: \/* Auskommentierung .extended_subnav { width: 211px; position: absolute; z-index: 10; right: 0; \/* Analog zum padding-right von .mod_subnav *\/\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":132,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/24\/responsive-iframe-und-video-elemente\/","url_meta":{"origin":166,"position":5},"title":"Responsive iframe- und video-Elemente","author":"Paul-Christian Abla\u00df","date":"24. Februar 2013","format":false,"excerpt":"Beim Einbetten von Videos innerhalb von iframe- oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Gr\u00f6\u00dfenver\u00e4nderung ihres Containerelements. Obwohl die Breite des iframe's mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen H\u00f6he betroffen. Um dieses Problem zu beheben, gibt es\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/166"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":12,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"predecessor-version":[{"id":251,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/166\/revisions\/251"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}