Articles of css3

Android浏览器忽略响应式网页设计

我刚开始转换我的网站有’响应式网页设计’。 我安装了Firefox的“Web Developer”插件( http://chrispederick.com/work/web-developer/ )来检查它是否正常工作。 一切都很好看。 现在我用我的Android手机尝试了这个。 我在纵向模式下无法正常工作……我在手机上跟踪了@ media-selectorserror handling的问题: 此页面( https://worldtalk.de/m/test.php )生成一个CSS,输出浏览器使用的高度/宽度和设备高度/宽度+方向作为参数。 我得到了以下结果: 肖像,800×1200 风景,800×400 方向是正确的,两个方向的宽度/高度和设备宽度/高度相同。 但该设备(HTC Desire Z)仅使用错误的屏幕分辨率(800×1200)进行纵向模式。 我想避免使用带有用户代理的设备数据库或类似的东西。 附加信息: 浏览器版本:WebKit / 533.1 Android 2.3.3 / Sense 2.1 HTC Desire Z(T-Mobile固件) JavaScript报告相同的屏幕分辨率 问题: 这只是我的手机型号还是Android浏览器的一般行为? 如何解决这个问题?

如何在Android原生浏览器中调试CSS?

我正在使用Cordova for Android构建混合应用程序。 HTML5 / CSS3可通过适用于桌面的Chrome和适用于Android的Chrome正常呈现。 但是,通过Cordova,HTML5 / CSS3使用本机浏览器(名为“Internet”的应用程序)呈现。 CSS解释似乎有一些麻烦。 Firefox有Firebug,Chrome有一个开发人员面板,可在桌面上进行远程调试。 您是否知道我可以使用任何类似的工具来有效地调试CSS移动本机浏览器?

在Android上强制正确的CSS3转换百分比解释

tl;博士 ? 获取以下链接中演示的机制,以在Android Chrome和默认浏览器上使用GPU加速。 更新2 (2014-01-13 13:25:30Z):根据bref.it下面的评论,截至Android 4.4 KitKat报告的行为是固定的 – 但我下面描述的修复现在打破了它! 索德定律。 更新1 (2012-11-01 17:54:09Z):从转换元素的计算样式报告的变换矩阵可以推断出有缺陷的行为,它返回一个像素值。 我将尝试为此编写一个Modernizr测试,以便为任何可能的解决方案铺平道路。 我开发了一种滑动容器的机制,以显示全宽,水平排列的子部分。 滑动标签,基本上。 因为有很多性能密集的东西和精心设计的Javascript,我希望将JS保持在最低限度,并尽可能多地使用CSS中的纯粹风格。 我认为我做得很好,考虑到 – JS只是改变了包装器的一个属性: (左) http://jsfiddle.net/barney/VPJuq/ (移动设备可以附加/显示/显示这些小提琴url以自行查看结果) 关于这是如何工作的一句话:将标签视为inline-block s允许我指定white-space: nowrap (最后几条规则中的其余代码基本上折叠了标签之间的空白)并允许它们水平堆叠没有清除/返回,一直保持其父级的全宽。 从那里开始,为包装器设置负的左偏移就可以了。 很酷,对吧? 现在,一点上下文:我正在开发的接口是在本机移动应用程序中运行 – 应用程序的核心function依赖于尖端的移动专用技术(不要问 – NDA) – 通过UIWebView,而且是唯一的目前支持该技术的平台是Android。 在这里,我的问题是双重的: transform: translate工作a / lot / smoother( translate3d甚至更多)比left或margin-left过渡,到一个非常可取的点,边缘线至关重要 – 特别是在Android上,看作非翻译在拥有最新操作系统的最新手机上,过渡仍然令人窒息。 考虑到这一点,问题的关键在于Android在与translate相关时似乎推断出盒子模型的不同。 为了演示,这里是基于transform的同一件事的版本,它与前一个小提琴做同样的事情,适用于支持translate3d的所有浏览器…… (带翻译) http://jsfiddle.net/barney/EJ7ve 如果你在iPhone上检查这个(再次,通过追加/show ),你会注意到iPhone上的帧率有所提高。 对于在Android上运行的Firefox也是如此,可以说在Chrome和Android上的默认浏览器上也是如此,除了在这里,-100%的translateX偏移以某种方式指的是所有三个选项卡占用的空间,因此包装器滑动就足够了没有任何标签可见。 […]

Android Webview是否支持CSS3 WebKitanimation?

Android操作系统上的WebView控件是否支持硬件加速的css3animation? 所有的webkit css(例如:-webkit-transition bla bla)我已经在Safari Mobile上工作了,他们在android上的工作方式是一样的吗?

border-radius在现代原生Android浏览器中不起作用

我有一个使用border-radius的页面。 它不会在原生Android浏览器中四舍五入; 它显示与方angular。 它显示在桌面的Chrome浏览器,IE浏览器,FF等四舍五入罚款,但不是在本机手机浏览器。 有谁知道这是否是浏览器本身的问题,一些额外的CSS扩展,我不使用等? 这是我的CSS(在演示中): .bigButton2 { width: 320px; height: 200px; margin: auto; padding: 20px; background-color: #521c0b; color: #FFFFFF; border: 3px solid #e3b21e; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; } 我build立了一个JSFiddle: http : //jsfiddle.net/VJvQA/ 我已经尝试过填充,没有填充,没有箱子大小,没有箱子大小,它只是显示为尖angular。 任何帮助或见解,将不胜感激。 我意识到已经有人发布了这个( border-radius样式在android浏览器中不起作用 ),但是他没有提供任何代码,JSFiddle,并且没有任何真正的答案而被错误地回答了一个普通的问题。 如果可能的话,我会冷静下来,但是我认为,写一个真正写得好的问题会更好。 谢谢!

css3转换rotate3d与透视不工作在Android上

我有一个使用3D转换的Web应用程序,它可以在Android 4.1的Android浏览器中正常运行。 但是,PhoneGap容器中的相同应用程序导致挤压和展开animation,而不是透视3D旋转。 有没有办法让它在PhoneGap中运行,或者是否使用了不能进行3D转换的不同渲染引擎? 我用 -webkit-perspective: 300; 在父母和 -webkit-transform: rotate3d(0, 1, 0, -180deg); -webkit-transform-style: preserve-3d; 在旋转的图像上。

Android浏览器不支持百分比值的边框半径

在Android浏览器中使用边框半径的%值是否存在已知问题? 我注意到当我使用: .element { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 边界半径似乎适用于所有的移动浏览器,但是当我使用: .element { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } 在Android浏览器上,边框半径不适用。

li元素中的一个div的jquery点击事件没有在移动Safari中被触发

修正:最后我直接生成元素,而不是由jQuery呈现。 Updated2:似乎很清楚真正的问题。 我做了一些testing,只有一个testing,我插入一个链接。 但是我不想绑定整个li元素,而是绑定一个div元素。 更新:我做了一些关于DIV的位置的修改,它现在在Android的工作,但移动Safari甚至在UL列表中的任何元素。 以下方法适用于桌面Safari和Chrome,但不适用于其移动版本。 有任何想法吗? JS: $('#SubCategories > li .likeRibbon').live('click', function () { …… }); HTML: <ul id="SubCategories"> <li id="st2" > <div class="likeRibbon">Like?</div> </li> </ul> CSS: #SubCategories .likeRibbon { border-style: solid none solid none; border-width: 1px 0px 1px 0px; border-color: #565656; background-color: #565656; color: #333; text-shadow: 0 1px 0 #777, 0 -1px 0 […]

当边框半径小于整体边框宽度时,Android浏览器呈现边框错误

这是Android bug 41913。 感谢谁打开它! 我认为, 这和以前的问题几乎一样,尽pipe这里的屏幕截图看起来与我所看到的截然不同。 我想要做的是创build一个厚顶部边框和圆angular的框, 就像这个JSBIN例子一样 。 这在桌面浏览器(以及支持border-radius浏览器)和iOS Safari以及Chrome上运行良好,但旧版Android浏览器显示如下: android http://img.androidcookie.com/android/android.png 边界呈现为使得曲线以外的较厚部分不会到达边缘。 有谁知道是否有办法让浏览器正确地做到这一点? 这似乎是一个至less回溯到Android 2.3的一致性错误; 截图是从一个4.0.3手机。 这是来自JSBIN的HTML: <body class=single> <div class=dialog-bound> Hello World </div> </body> 和CSS(从实际项目中抽取的类名): body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; margin: 50px auto; max-width: 32em; border-width: 28px 0 8px 0; border-style: solid; border-color: #89BAE2; -webkit-border-radius: […]

溢出隐藏不适用于Android

我有一个图片显示在DD圆angular。 当我build立它,并得到它在android设备上溢出:隐藏不起作用,完整的图片显示在dd。 任何人都有这个问题,并知道解决方法/修复? 这是DD的CSS。 .empImage { position:absolute; width:90px; height:110px; top:0; right:0; overflow: hidden; background-color: #eaeaea; border: #f26122 solid thin; -moz-border-radius: 15px; border-radius: 25px; -moz-box-shadow: -5px 0px 5px #666; -webkit-box-shadow: -5px 0px 5px #666; box-shadow: -5px 0px 5px #666; }