Mobile Web in High Resolution
来源:互联网 发布:linux apache下载64位 编辑:程序博客网 时间:2024/05/01 06:52
With the advent of high DPI device screens like Apple's retina display, creating high resolution apps has become a standard for native app developers. But what about us mobile web folks? Most elements like text and images are automatically handled for us by the browser and display in the highest resolution possible. But when we use CSS styles like borders and shadows, 1px really ends up becoming 2px (at least on the retina display). So in order to create a higher resolution experience we need a way to set less than 1px borders.
Lets take a look at a standard CSS button:
button { font-size: 13px; line-height: 36px; font-family: sans-serif; font-weight: bold; color: #fff; padding: 0 15px; border: solid 1px; border-color: #2978B0 #266FA5 #1C557D; border-radius: 3px; background: -webkit-gradient( linear, left top, left bottom, from(#50A9E7), to(#307CB3) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.08); text-shadow: 0 -1px 0 rgba(0,0,0,.25);}
It uses borders, gradients, and shadows to achieve a moretouch-friendly button. Now, I’m sure some people are wondering what more do I need than that? Well if you pull this up on a high resolution display like the iPhone 4, you get this:
Notice how the borders and shadows end up measuring 2 pixels rather than 1. This occurs because the browser attempts to render a 1 pixel border which, for the high-res display, ends up being 2 pixels at the 1:1 zoom level. Really all you need to know is that it's not acceptable to do this: border: 0.5px red solid;
since all pixel measurements must be positive integers. So how do we achieve a button like this:
This button uses a completely different approach for high-res displays. Instead of relying on standard border styles, it uses offset box shadows with a hidden gem called spread radius. The spread radius as documented on MDN:
"Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element)"
Essentially we can set the spread radius to -1px and shrink the shadow effect to a half pixel length. And there it is, half pixel borders and shading for high-res devices! Take a look at the code:
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { button { border:none; padding:0 16px; box-shadow: inset 0 0 1px #000, inset 0 1px 0 #75c2f8, 0 1px 1px -1px rgba(0, 0, 0, .5); }}
Note that I apply the box shadows in a specific order– more on this here.
Live Examples
Now pull out your iPhone 4(S), or any other high-res device, and take a look at these examples I put together:
What if I dont have a high-res device?
All of these are pretty simple ways to use this half pixel technique, but the options are endless. Facebook is the first I’ve seen to use this effect in production code. If you find some other cool ways to take advantage of this technique let me know on twitter.
- Mobile Web in High Resolution
- High-Resolution Timer
- High-Resolution Timer
- High-Resolution Timers
- 《Vehicle Detection in High-Resolution Aerial Images via Sparse Representation and Superpixels》论文笔记
- 《Vehicle Detection in High-Resolution Aerial Images Based on Fast Sparse Representation ...》论文笔记
- PCL :Supporting High Resolution Printing
- Handling large/high resolution images
- High-resolution timer for C++
- web or app in Mobile ?
- web or app in Mobile ?
- High Resolution Timer内核高精度时钟
- linux_small laptop with a high resolution
- 高精度计时器(High Resolution Timer)
- 关于Linux的 High-Resolution Timer
- Dependency Resolution in MVC
- Resolution In Linux Desktop
- not working in mobile web forms!
- 我在北京工作这几年 – 一个软件工程师的反省
- 如何让 htmlunit 执行 javascript 时,不下载整个页面,而只返回url
- 思考: NSBundle
- GDAL源码剖析(八)之编译GEOS和PROJ4库
- x86 Architecture
- Mobile Web in High Resolution
- sqlplus输入scott/tiger报错:the account is locked
- 用汇编的眼光看C++(之 总结篇)
- IT人的一天—逐浪CMS原创贴文大赛
- java访问控制
- 实习快一个月了
- MySQL 存储过程的异常处理
- spring features
- C++ 虚函数表解析