I am trying to design a site that is easily accessible from tablets, smart phones, and desktops, and is equally usable from any device.
After a bit of reading, I found mixed numbers for the iPhone 4 resolution, which is 620px - 760px.
I am aware of using the following CSS to detect the type of media. However, the following CSS is not applied on my iPhone 4.
//detect smart phone
#media screen and (min-width:1px) and (max-width:780px) {
.inner-main-header{border:2px solid brown;}
}
Any ideas why this is? any suggestions what I can do in this case? my goal is to simply use one particular CSS for tablets and another for smart phones.
I appreciate any suggestions.
Many thanks in advance!
I believe it'd be min-device-width and max-device-width. Also, your pixels look a bit off:
//detect smart phone
#media screen and (max-device-width:640px) {
.inner-main-header{border:2px solid brown;}
}
//detect tablets
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
.inner-main-header{border:2px solid black;} //changed to black just to see difference
}
honestly I would use a site like this to redirect users to appropriate subdomains with their own respective css. If you opt not to do such a thing, I would suggest just using css to scale all the media based on screen size using values such as max-width: 100% and width:auto\9. Another good tutorial would be this youtube video good luck!
Related
This media query is only been picked up by the iPhone 6 Plus but not any other iPhone or Android phone.
#media screen and (device-aspect-ratio: 16/9) and (max-width:768px),
screen and (device-aspect-ratio: 16/10) and (max-width:768px){
.content{
margin-top:200vh
}
}
Any ideas?
Thanks,
Aaron
Wouldn't orientation be better used than device-aspect-ratio eg.
#media screen and (orientation: landscape) and (max-width:768px){
.content{
margin-top:200vh
}
}
Plus device-aspect-ratio will become deprecated and replaced with aspect-ratio http://dev.w3.org/csswg/mediaqueries-4/
Its probably the aspect ratio. If another screen has the same width but differing aspect (ie, height) then it will not match and will then not render for this device.
Try not to be too specific in your #media queries - targeting exacting devices will leave you a lot of work, try and make the layouts flow across devices it does not need exact pixel positioning across every device. Besides next month a whole new wave of devices will hit the market and negate all that hard work.
Good afternoon. I have a task to understand what is happening. Website was made before me.
If you try to resize the browser to 320x240 you will see that the site is adapted, and if you go through the mobile phone Android it is not. Someone can tell what's wrong? Where to start looking?
Website is using MasterPages. Almost all elements are HTML.
LINK
mif.antaris.ua
you need to look in css files for #media tags.
it seems like the mobile css has a max-width: 320px or something similar.
anyway, try putting all mobile css inside something like:
#media only screen and (max-width : 400px) {
/* mobile css */
}
this will apply the css code within the #media block only when screen width is lower than 400px.
hope that helps.
I will be running my GWT generated Java script file on android and I am trying to get my UI to look the same regardless of the size of the mobile screen. Most of my views have 5 to 6 widgets , buttons, Textboxes mostly. I have put them in a FlexTable for now but maybe there is a better way to lay out the widgets?
My main question however is about how to use CSS to layout my widgets so the look and feel is the same across all screen sizes. Is this possible to do using CSS? If so would anyone have any CSS examples that focus on widget positioning?
For GWT on various screen sizes (and to handle landscape, portrait rotation) I use media queries. In this way you can define css rules for each screen size.
For example in the following below I never need myContentPanel to be larger than 450, but that is too large for iPhone/Android portrait views:
#media all and (max-width: 10024px) {
/*styles for narrow desktop browsers and iPad landscape */
.myContentPanel{
width: 450;
}
}
#media all and (max-width: 320px) {
/*styles for iPhone/Android portrait*/
.myContentPanel {
width: 320;
}
}
Here is a more complete css example http://snipplr.com/view/67341/
There is a great tutorial using jQuery here http://css-tricks.com/resolution-specific-stylesheets/
You can see more here at:
http://css-tricks.com/css-media-queries/
You can use ViewPort Meta tag to maintain proper widths and heights for your web applications on mobile devices too.. with out changing all the layouts .
The viewport meta tag to control layout on mobile browsers.
See the below question also ,which I already answered to set the viewport .
Achieving min-width with viewport meta tag
And also have a look at #media tag as user1258245 said
I have a project that is displaying 16px text font at 0.5ems links on the iPhone perfectly fine.
However, when I switch to an Android browser, the text font enlarges itself and my positioning of the links are screwed.
My links are in a
<p><a>[Link]</a></p>
statement.
Is there any way to prevent the Android text from resizing itself? Or is there a better solution to this?
EDIT:
I just realised the android browser doesn't allow for auto scrolling as well. Why is this so? Aren't both the iPhone and Android browsers using webkits as its base? Why are they so different even though they use the same technology? Are there any extra attributes i should declare in CSS for it to work the same as the Safari counterpart?
I had a similar problem as well. I had a design that was designed specifically for the Retina display, but the retina display actually has a pixel density of 2, so a pixel isn't necessarily a pixel (non retina iphone pixel width: 320px, retina: 640px).
To fix that, I put this in the <head>: <meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'> so that a normal phone will scale as I expect, and the retina display would scale appropriately (half scale).
I'm not sure what kind of design you're using, but I'd play around with the initial-scale and maximum-scale, try both .5 and 1 and see what you get.
If you use pixels (px), it is related to the screen pixel density. An iPhone "retina" display would show text differently to your Android device.
This article covers the topic pretty well: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
I found a setting that might help in another question, Font size rendering inconsistencies on an iPhone:
body {
-webkit-text-size-adjust: 100%;
}
An alternate value is described in another question, Font size issue with iPhone:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Seems like one of these might prevent the android browser from resizing. Hope this helps.
If you want to stop Android from auto-scaling your pixel values, you can try adding this to your viewport meta:
target-densitydpi=device-dpi
Here's a good reference on the same:
http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui
When using border-radius on my android emulator I am seeing ugliness like this:
ugly border radius http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png
Is there anyway to get Android to display rounded corners via -webkit-border-radius in a more pleasing way? Most modern desktop browsers and Mobile Safari seem to antialias their corners, but not Android's renderer.
I'm really hoping I don't have to do this with images, and there is some awesome trick to get pretty corners with only a border radius css declaration.
I indeed absolutely needed too some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class:
-webkit-box-shadow: 0 0 1px #000;
There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look ( slightly ) less sharper.
At the time I’m writing this I didn’t thinked yet at the perfect solution, but you can make good use of media queries limiting the rule wether you use the ‘max-width’ property (to limit the range of devices based on their screen width at least spearing webkit desktop browsers) or the ‘-webkit-device-pixel-ratio’ to target the different android devices based on their pixel density:
#media only screen and (-webkit-device-pixel-ratio:.75){
/*for low density (ldpi) Android layouts */
}
#media only screen and (-webkit-device-pixel-ratio:1){
/*for low density (ldpi) Android layouts */
}
#media only screen and (-webkit-device-pixel-ratio:1.5){
/*for low density (ldpi) Android layouts */
}
Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer like me too ;)
There is no imageless solution to this in the curent Android release, sadly.
For just displaying a circle, using a transform along with -webkit-backface-visibility: hidden; as per this answer could help (although transforms are expensive on low end Android devices).