samsung s5 display:1080 x 1920 pixels but in my media query at this screen size target
#media handheld, screen and (max-width: 970px) {}
the image show the problem:
by the way I used this meta tag inside head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
The "px" unit in CSS doesn't actually mean a physical pixel on the screen. It's a device-independent unit that refers to the (approximate) size of a pixel on a traditional PC monitor, and browsers are expected to scale it appropriately when rendering to a high-DPI device like a printer or a modern "retina" display. So although your phone's screen is 1080 physical pixels wide, it's far fewer CSS pixels wide.
The exact definition of the "px" unit has varied across CSS versions, but all they all define it with approximately the same physical size. CSS3 says "1px is equal to 1/96th of 1in" — the size that a physical pixel would be on a 96dpi monitor.
Wikipedia says that the Galaxy S5's screen is 2.85 inches wide. With 96 CSS pixels per inch, that'd make it about 274px wide from a CSS standpoint.
Related
Why we have breakpoints for 400px or 600px, for example?
These breakpoints are verifying the resolution of the device, but now smartphones have resolutions such as Full HD (1920 x 1080 ) or 2k (2560 × 1440). That's why I'm confused. Why do I have to use breakpoints for smartphones with 400px - 600px if now most of them have 1080px - 1440px?
I have a 1080 x 2340 pixel device, but my webpage looks like it's 500px wide
The pixels we define in breakpoints refer to the viewport size of the device, while the pixels defined in a device's screen resolution refer to the number of physical pixels that device has. Viewport size exist to compensate the difference in screen sizes of different devices.
This unit of measurement is sometimes referred to as “device independent pixels” or “CSS pixels”.
For instance, a laptop and a smartphone, both with a screen resolution of 1920x1080. If the screen of the two devices are treated the same way because their screen resolution is the same, the same content (let's say a 1200x1200 image) displayed on both device would look fairly large on the laptop but would look very small on the smartphone because even though they have the same screen resolution, their screen sizes are very different. But with viewport size, the same content can be scaled depending on the device's screen size.
You can read more about this topic in Difference Between Viewport, Screen Resolution, DPR, and PPI for Responsive Web Development.
Hope this information answers your question.
I'm making a web app I've built responsive. I haven't been able to get some of the screens to get any smaller than 360px wide. But many smartphones are trying to display it at 320px wide. How do make it so it'll be responsive down to 360px but no less?
UPDATE: Prior to posting I had already specified a viewport tag of:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And, I set a min-width for the container of 360px.
The issue is that in doing this, 40px on the right are hidden when the user first visits the site as IPhones and many others default to only showing 320px even though they are capable of showing more. I know they can zoom out but I'm wanting it to show 360px wide at load time.
So definately add in the following viewport meta tag in to the head of your html document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
You'll need this to really do any responsive work on phones or tablets.
I'm not sure if you want your width to get no wider than 360px or you are stuck at 360px and want to make sure it decreases all the way down to 320px.
If you want it be no smaller than 360px...
You want to have your "wrapper" element be fluid only down to 360px you can set a property on your wrapper div (or whatever element is controlling the width of your site) in CSS to say min-width: 360px;. This will make it so the wrapper element doesn't get any smaller than 360px wide.
If you can't get it to resize smaller than 360px and want it to... This is kind of the reverse of the above. Maybe your wrapper element has a min-width: 360px set. In that case you can remove that property which will allow it to scale narrower than 360px.
I haven't tested this alteration of the viewport, but give this a try.
<meta name="viewport" content="width=device-width, min-width=360, initial-scale=1.0" />
What I'm hoping it will do is make the width equal to the device's width, unless the device's width is less than 360px (aka the iphone) in which case make the width 360px.
Your best bet though is to really switch up your mindset a little bit and use a media query to adapt your code for the best presentation at 320px wide. So let your site be displayed at 320px wide but change the css so the site fits nicely at that width.
For instance:
#media screen and (max-width: 360px){
.wrapper {
width: auto;
}
//change some font sizes
//put float: none on a few elements that were previously floating
//change a few widths of container elements to auto
//etc.
}
The css inside the media query will only get applied if the device is 360px or less.
I have a responsive website. I already have...
<meta name="viewport" content="width=device-width, initial-scale=1"/>
...in the header. The website doesn't just scale everything down automatically to fit on a smartphone screen. It maintains the proper size of my DIVs (whether they be fixed or percentages) and I design my elements to fit accordingly.
However, on one page, I have an interactive diagram with several elements. These are blocks (with text inside them), and they have to maintain fixed widths. The problem is, these fixed widths are much larger than smartphone screens. It's about 1000px wide.
I can't make this div percentage based. It has to be at least 1000px wide and maintain that size on every device. Obviously, this means that it will not fit on smartphone screens.
What I would like to do is continuing using...
<meta name="viewport" content="width=device-width, initial-scale=1"/>
...for every other element in my website, except this one DIV. I need to scale the entire parent DIV, its child DIVs and the text inside of the child DIVs.
I have tried the CSS "zoom" property. But, it doesn't scale the text properly, and the widths of the child DIVs don't seem to "zoom" equally. They get out of alignment.
How can I conditionally apply that meta viewport tag to everything except this specific, fixed width DIV?
you need to write a css media query where your page breaks to adjust the div and its nested elements
here is a css3 media query template gist you can use https://gist.github.com/marcobarbosa/798569
or better yet, I would use bootstrap's responsive grid http://getbootstrap.com/2.3.2/
Disclaimer: I'm not exactly certain this is what you're looking for and I don't have enough rep to ask for clarification in a comment, so here's a possibility...
<meta name="viewport" content="width=1000" />
...where "1000"px is the fixed width of the div you're looking to contain. By omitting the "initial-scale" attribute, the device should figure out the scaling it needs to apply for itself.
Trying to find what unit of measurement Titanium uses for defining the font size in mobile applications. Want to match it up to Photoshop for mockup purposes.
On iOS, font sizes are in typographical points (1/72 of an inch), so font size 12 should be the same visual size on both devices. (Of course, it will be larger in the Retina simulator, because it's twice as many pixels.)
Note that other iOS sizes are in Apple "points," which don't correspond to typographic points. An Apple "point" is 1px on a pre-Retina device, and 2px on a Retina device.
On Android, you can specify units. The default is pixels (for example, 12 and '12px' both specify 12 pixels). You can also specify sizes in Android's density-independent pixels, points, millimeters or inches. So:
'12dp' == 12 DIP (roughly equivalent to Apple's "points")
'12pt' == 12 points (typographical points)
'12mm' == 12 millimeters
'12in' is a REALLY big font
On a medium-density device like the G1, 12px == 12dp. On a high-density device (most of the newer Android phones with 800x480, 854x480, or 960x540 screens), 12dp renders twice as big as 12px--just like the Apple "point" system.
Why aren't DIP the default unit on Android? That I can't answer. I guess Androids just like pixels.
Its in pixels, but don't forget your photoshop mockups need to be double the size for the retina display.
So your mockup would be font-size 24px and in Titanium you would specify 12px.
According to this it's pixels converted to points. According the actual Apple UIKit it's points as well but I'm not sure if Appcelerator changed it or not. It could also be different based on the OS(name/type)?
actualFontSize
On input, a pointer to a floating-point value. On return, this value contains the actual font size that was used to render the string.
I develop a simple mobile page; the font displayed is very samll although I set it as 33px and the screen resolution for iPhone is 320 X 480.
Does anyone know why it is so small?
Or the screen resolution is not 320 X 480 since it can be zoomed. Then how do I make the font to be adapted to the resolution automatically?
Safari can be zoomed in and out, so a CSS pixel doesn't always equal a screen pixel (especially when the iPhone 4's denser screen comes out - you wouldn't want your website to be 1/4 the size just because there are more pixels stuffed into the display!).
You can turn off Safari's zooming with a special meta tag, as described in the Apple docs:
<meta name="viewport" content="user-scalable=no, width=device-width" />