html - Understanding Screen Sizes/Pixel Density for Web Development (Websites & Emails) -


i'm trying understand few things deal pixels.

the first of changes between developing html email , website in terms of appearing on mobile screen. more specific, when developing website, can have media queries run below 375px (i.e. @medie screen , (max-width 375px)) , changes occurring in code not reflected on desktop (since browsers without going inspect restrict width @ 400px); however, on phone has smaller screen iphone se, changes occur under media query hit.

so on own makes sense me, because phone screen smaller min browser width, of course changes apply in block hit when website executed on phone. confusion gets introduced. when developing html email, have table set 600px wide. there no media query affecting html. table 600px wide under circumstances, when displaying on less 600px wide phone, assume of page clipped, not so. when viewing email in gmail, entire composition visible. made me scratch head bit, researched , found sources claiming phone greater 600px wide. thought screen density greater of laptop, or maybe magic gmail applying, either way, email shows on laptop in browser width greater 600px.

i'm using these meta tags

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

and have base understanding of do, how these contribute mobile exactly?

in summary, main questions follows:

  • why media queries websites run max-width: 375px hit phone, , yet table 600px wide viewable same time?

  • is matter of screen pixel density, or little more complex?

  • what roles these meta tags play exactly?

any insight can provide appreciated. thank you.

why media queries websites run max-width: 375px hit phone, , yet table 600px wide viewable same time?

because phone visual port has width of 1136 pixels , height of 640 pixels.

is matter of screen pixel density, or little more complex?

its matter of screen pixel density, default pixel ratio depends on display density:

default ratio when viewport scale equals 1 display density < 200dpi ratio = 1.0 display density > 200dpi && display density < 300dpi ratio = 1.5 display density > 300dpi ratio = integer floor(density/150dpi)

for iphone se 326 ppi (pixel per inch).

what roles these meta tags play exactly?

the tag not part of web standard , introduced mobile safari, width property controls size of viewport, device-width special value, typical use of tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

which sets width width of device viewport, , zoom of 1, width in css pixels doesnt take account pixel density @ all. changing value of meta tag javascript works, website react new value. try setting width 375px see happens in phone.

check 2 articles:


Comments

Post a Comment

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

hi i'm using ngfor create set of 3 slides while starting in middle i'm guaranteed able slide left or right on start. when slide right can simple listen reachedend , push slide array i'm looping. but have problem adding slide beginning. if same above , use e.g. array.unshift() or spread add item beginning, view think it's on position 0 , snaps view new slide. the code below work animates slide change index 1. slide = [0,1,2] //example loop slidechanged(event) { if(this.slides.isbeginning()){ this.slide = [this.slide[0]-1, ...this.slide]; this.slides.update(); this.slides.slideto(1) } } <ion-slides [initialslide]="1" (ionslidedidchange)="slidechanged($event)"> <ion-slide *ngfor="let item of slide"> <h1>slide {{item}}</h1> </ion-slide> </ion-slides> any appreciated! you can using ionslidenextend , ionslideprevend events slides . please
Read more

minify - Minimizing css files -

i want know how css files can minimized. currently, using external sites css minifier compress css files. however, after removing whitespaces, comments, etc, file sizes reduced 10-15%. how frameworks bootstrap manage make minimized versions kilobytes. as example, css is: body { background-color: #ff0; } the reduction goes 28 bytes 22 bytes other css files have lot more characters still smaller this. actually minifying code means it's remove thing code white space characters new line characters comments block delimiters it reduces amount of code has transferred on web , speed site load fastly.but unreadable format.
Read more

Add a dynamic header in angular 2 http provider -

i have http interceptor built via tutorial https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2 the problem need have dynamic header changes automatically once changes 'mode' in app. service able tell interceptor change header, or have interceptor pull header (which string)from service each request. able throwing away patch method, call http.patch('new header string') set header string. call in service controls 'mode' setting. wondering if there way interceptor pull recent value service each request or if can add method http provider via interceptor? i've tried call service in interceptor each request returns undefined. because creating new instance of service or copying value before service fired , loaded/changed data. i don't want pass header string every http provider call because defeats purpose of having interceptor, id able set once changes or have provider fetch service before makes request. tl;dr : need add autom
Read more