I have converted my website to android compatibility with using of CSS3 Media Queries(I just changed CSS only). My android device dimensions are 1280x 600. Its working fine in android devices.
But when I turned my desktop to 1280 resolution the design is changed (like how i wrote for android device). But it shouldn't come like that.
Only for devices i have used the css below
#media only screen and (max-device-width:1280px){
}
What is the mistake i have done?
That query affects every device with a max with of 1280px, not only mobile.
Related
How can you determine the effective browser resolution (for CSS) of Samsung Galaxy Tab A 10.1 (or any other tablets)?
The specifications say that the resolution is 1920 x 1200. So I designed an application that will run on 800+ Samsung Galaxy tablets. Now I see that the resolution is wrong and I can't get the right resolution from the internet. Of course the app is responsive but I would like to make use of a testing tool in the browser.
My goal is to add this correctly to my Chrome developer console.
Specs: http://www.samsung.com/uk/tablets/galaxy-tab-a-10-1-2016-t580/SM-T580NZKABTU/
A very cheap means of finding your device's web browser resolution could be to simply determine it's viewport dimension.
While there are a ton of apps out there to get the information for you, a basic website such as http://www.mydevice.io/ can help out with this.
This website should also help give comparisons of other devices if you don't have the device yourself.
I would presume the Samsung Galaxy Tab A 10.1 should be 800 x 1280 for CSS media queries.
I am relatively new to responsive web development and I've been confused on media queries for a while.
How does this:
#media screen and (max-device-width: 320px) {}
Become iPhone specific when it only targets screen size? Wouldn't many more devices become targeted by this?
I see references like this: http://stephen.io/mediaqueries/ and wonder why this is the standard.
And is there truly a way to target iPhone only versus Android only?
Much thanks.
A media query will work on all devices. This only detects the width of a screen and nothing more.
The site you were viewing was just showing specific sizes for multiple devices. An iPad screen may not be the same width as say a Android Tablet screen.
I'm working on a website with responsive design and mobile optimization.
I'm having issues targeting the Samsung Galaxy S III default browser, as it does not scale font-sizes.
The funny thing is that everything works fine using Google Chrome for Android on the same device, so I don't think there is a problem with my #media queries. Of course I've triple checked them and I am sure the Galaxy S III displays fits in them. All the other conditional styles apply, except for font-sizes.
Everything works well on other Android based devices, eg the Samsung Galaxy Nexus's default browser.
Is there anything I should do to target The Galaxy S III default browser? Does it interpret in some funny way font sizes?
To answer one of your questions yes it does interpret font size in a odd way. The Samsung GS3 default browser is pretty bad in that regards. I am not really sure there is a work around on it. I can't imagine too many people are using the default browser anyways.
I'm currently working on a mobile version of a website which works great in the default browsers like Firefox & Chrome. Base is a fluid layout with a media query for a max width of 440px (#media screen and (max-width: 440px)to target portrait mode.
Font sizes are changing in the default browsers together with some other settings like smaller images and divs etc. However when I test the site on my HTC Android phone with the default browser it only shows the max width 440 style instead of the normal style which is based on a width of 480px.
What could be the problem for this behaviour? The mobile version can be found on httpp://www.seeyouzoeningouda.nl/m
Haven't posted the CSS because I really don't know which part of the code to show you. The css is based on the default HTMl5 boilerplate template (www.html5boilerplate.com)
What mobile devices have u used for testing ? If they are samsung galaxy s3 or apple iphone 4 then their device resolution has been doubled and hence this might be the cause for media queries not working.
So for I-phone 4 try to double the max-width from 480px to 960px and for samsung galaxy s3 if u double the max-width from 360px to 720px while writing the media query then it might work perfectly fine.
eg.
#media handheld, screen and (max-width: 960px)
#media handheld, screen and (max-width: 720px)
I think this might help you to target portrait mode.
Mobile device are sometimes targeted by #media handheld. Try using #media all instead of screen.
I am working on a web application which is run on iPhone and various Android phones. I have used iUI framework so far. iUI was designed for iPhone 3 and uses pixels in CSS for font-size, line-height etc. But the result is unusable on a newer Samsung I5500 with high pixel density (240 x 320 pixels, 2.8 inches = 143dpi). All the elements are too small. This can be partly compensated in browser settings > zoom > close, but I do not like making users change their browser settings.
My goal is, that every link and every button can be used comfortably by touching it. For that I would like to ensure a minimal physical size of the element. Luckily the CSS 2.1 specification provides a way for that: min-height: 20mm or min-height: 0.8in. Unluckily every phone I have ignores that declaration. On iPhone 3GS the element is 11mm in size, on Samsung I5500 (Andorid 2.1) is 10mm, on HTC Wildfire with low res display (Android 2.2) it is 14mm in size. Looks like WebKit browser assumes some low resolution like 96dpi rendering the elements hardly readable and barely clickable on high resolution mobile phone displays.
This blog post at sencha provides some solution approaches an recommends setting all the sizes for buttons, links, list items in em and shifting the size for body once by some sort of browser sniffing.
They also mention CSS3 media queries but tell, that it does not currently work:
#media screen and (min-resolution: 160dpi) {
body {
font-size: 114%;
}
}
For Android
<meta name="viewport" content="target-densitydpi=low-dpi" />
seems to help. It enlarges the page on devices with high-dpi more than on devices
with low dpi. But the physical size of elements is still different. See also Android WebView.
The Android DisplayMetrics documentation with its density vs. scaledDensity brings more fuzziness than clarification.
So the best combination I found so far for iPhone and Android is iUI plus following declaration in HTML head:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;target-densitydpi=low-dpi;"/>
Is there a modern, elegant way to set the font-size and button width and height for a wide range of mobile devices?
Or which workaround do you use?
I think the answer for you is the use of the EM unit instead of the pixel unit.
http://www.w3.org/WAI/GL/css2em.htm
It is a proportionnal type of unit. So that you are not specifying the size of your font and buttons as a fix number but as a multiplicator to the default font for that device.
It's webmaster's best practice for accessibility anyway and why most framework are evil !! :D