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).
Related
I'm making some little zoom-overlay components for a website, and so far I'd tested on iOS, IE, Chrome, Safari, Android 7.0.1 Chrome, without issue.
However I tested on my old phone (android 6) and it is not behaving at all as expected. It appears the root issue is that background-size: auto is not actually rendering at the original size (images are 4k, so they should appear quite zoomed in on a 1080p screen) they appear only slightly larger than when contained in the page.
Does anyone know why background-size: auto would not be showing my images at their true sizes? thank you.
Edit: I think my images are hitting a size limit and being auto-downscaled, which background-size is treating as their true size, while using an image element avoids this, likely due to automatic handling of original size values. If this is the case, does anyone know the actual limits?
If you remove the background-size: auto then in default it will take the full width image as background image
I have to turn a website originally developed for 1920 x 1080 resolution with the requirement of having no scrolling, to a hybrid android app for an android device that supports 1024x768 resolution with no scroll bars.. The whole website is wired using definite pixel values, with widths, heights and offsets specified in pixels, with thousands of pixel definitions in css. Is there a workaround to do it without manually calculating every element's definitive position and specifying in the css files? the original site wasn't developed using any of scss, and the target platform is android webview. The meta tags do not seem to work in my case.
This is to be used in a internal setting only, developing this from bottom up is a bad idea, since I have to reuse the existing code.
css 2d transform, scale applied on body element resolved the issue, but make sure it is prefixed with -webkit- in order to work on android
body{
-webkit-transform: scale(0.67,0.645);
-webkit-transform-origin: left top;
}
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!
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
Edit: also happens with $('body').width() and window.outerWidth
API 2.3.3 HVGA
Before and after rotating device outputs same screen width (320)
API 3.0 WXGA
Width and height toggle each rotation for example
starts with screenWidth:1280 screenheight: 800
I rotate 90
now has screenWidth:800 screenheight: 1280
so what do I do if I want to make certain changes on rotations
according to dimensions and want to target all APIs? I need a value which is the same for all devices.
Edit: For certain things I need pixel values, not percentages. That's why I'm using Javascript to calculate size based on screen width. This would work, since screen width is also pixel values and I can keep things proportional. But if sometimes screen.width gives me the current width, and others not, I can't use it...
-> The thing is I started working with a slider which uses absolute layout and needs pixel values for everything. I don't want to reimplement the slider, so I decided to calculate dynamically the size of the images and the whole layout using screen width. And initialize the slider with these values.
update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011
"One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....
Responsive web design techniques. I give a super brief example on my blog along with a book recommendation.
http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html
I use media queries in two of my PhoneGap Apps. No javascript, except in
the case of anomalies.
For example, the "base" css could be for width 320 and portrait,
then using the cascading effect of css :-) add blocks like:
#media screen and (max-width: 480px) and (orientation:portrait) { make stuff bigger}
#media all and (min-width: 800px) { make stuff even bigger }
With queries like these in my link'd css files (and the device/os/phonegap
handling of orientation changes) the new layouts happen auto-magically.
NOTE: I learned all this from reading Simon's blog and the materials he suggested.
Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.
I'm not aware how phonegap presents in information for you, but for a native Android application you typically declare different layouts and image resources for various display densities and screen sizes/widths. See this page for more information: http://developer.android.com/guide/practices/screens_support.html