Articles of css

在Android 4.1.2上的Phonegap 3.0应用程序中无法完全摆脱点按高亮颜色

在Android 4.1.2上点击Phonegap 3.0应用程序中的元素时,我完全摆脱了可怕的亮点。 当点击一些元素时,我首先在tapped元素下获得一个橙色(在这种情况下)突出显示,但随后快速连续的父元素(或另一个祖先元素,不确定哪个) 也显示一个高亮显示! 我知道通过设置透明颜色可以“禁用”点击突出显示: * { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids */ } 这实际上适用于我的应用程序中的大多数可点击元素,但在某些元素上,父/祖先元素仍然会突出显示! 我已经创建了一个演示 ,演示了我正在测试的设备上的外观(三星Galaxy S3)。 是啊,没错。 我正在使用jsfiddle作为animation工具:-) 我已经尝试了另一个线程中讨论的所有内容: 禁用焦点上的橙色轮廓突出 由于点击突出显示实际上在上面用css规则点击的所有元素上消失了,我开始怀疑这个次要的较大高亮显示除了点击之外的其他内容。 但我试图扩展css规则也适用于*:hover, *:active, *:focus没有成功。 我也试图在css和Android应用程序本身之外解决问题。 WebSettings中的第一个setLightTouchEnabled ()似乎很有希望,但是A)它没有用,B)从API级别18它已经过时并且没有效果。 我真的很茫然。 任何帮助都将非常感激。

防止在移动浏览器中隐藏地址栏

我目前正在开发一个水平布局的网站。 所有元素都是位置:绝对的javascript。 它们的大小是用window.innerHeight计算的。 我的问题是,尽管元素不高于窗口的高度,我可以向下滚动(地址栏的高度)。 这在两个方面很烦人。 首先它触发了当时我既不想要也不需要的window-resize事件。 第二,它与一些内容应该可以垂直滚动的内容盒不能很好地兼容。 有时我可以滚动框,但有时整个页面会先滚动(如前所述:地址栏的高度)。 有没有任何解决方案可以阻止我在所有设备上使用这种地址栏自动隐藏机制。 预先感谢! 这根本不可滚动: http : //maxeffenberger.de/test.html 这可以水平滚动(有意义地看到隐藏的内容)但也是垂直滚动直到地址栏被隐藏(没有意义,因为没有额外的“垂直”内容需要更多空间: http : //maxeffenberger.de/test2 html的

android自动调整模式导致网页中的CSS宽度问题

我有Android浏览器的自动resizefunction的问题。 当设备处于纵向模式时,我网站上的宽度有点乱。 我想做的是 为桌面和移动用户提供相同版本的站点。 允许用户随意放大和缩小。 我目前在脑海里有以下几点 我发现以下博客文章描述了我的问题。 这肯定是由自动调整布局引起的(Android WebKit源代码中的“kLayoutFitColumnToScreen”)。 只需尝试禁用自动调整的测试,一切都正确呈现(至少在我的Android设备上)。 Android上的自动调整模式似乎会缩小某些元素的宽度,而不会影响其定位或其他元素的定位。 因此,如果您有一个宽度为1000px的包含块和跨越该宽度的100%的文本,则容器可能保持1000px宽,但其中的文本将以屏幕宽度换行。 http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html 有没有办法阻止这种自动调整模式进入? 我不想禁用缩放。 更新: 如果有人知道,我仍在寻找解决方案。 find了有同样问题的人(虽然他们正在使用桌子) 跨页列在Android Web浏览器上折叠(使用自动调整页面时) http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

在Android中的xml文件中存储维度

我试图在我的Android应用程序的所有视图中始终使用相同的维度(例如,左边距为20dp)。 如果我使用HTML,我只会使用CSS文件,但我不知道如何在Android上执行此操作。 有没有办法可以将这个值存储在res / values中的xml文件中,然后在布局中使用它? 例如,我想将它们存储在strings.xml中 20dp 然后在layout.xml中使用以下文本 android:paddingLeft=”@string/app_wide_left_padding” 但我不确定它会起作用。 我是在正确的轨道上吗? 提前感谢您的回答。

Bootstrap wysiwyg textarea编辑器在Bootstrap 3上工作

我正在为Bootstrap 3寻找一个所见即所得的textarea编辑器。我在Google上find的所有东西都只适用于Bootstrap 2.有没有人为Bootstrap 3提供一个好的,简单的所见即所得的Edtor?

React Native中默认的样式单位是什么?

我正在为开源项目做贡献,我正在为React Native开发材料设计。 我在工作中被阻止,我无法通过填充,对齐等方式进行一些UI级别的增强, 这是抽屉材料设计的官方规格 – 在上图中,测量单位是dp 。 但是,在我的React Native代码中,我看到没有提到这样的单位。 考虑到它是“反应原生”我很困惑它是px还是dp 。 我甚至浏览了React Native for Style组件的官方文档。 我在任何地方都没有提到。 我的守则看起来像 – const styles = { touchable: { paddingHorizontal: 16, marginVertical: 8, height: 48 }, item: { flex: 1, flexDirection: ‘row’, alignItems: ‘center’, }, icon: { position: ‘relative’, }, value: { flex: 1, paddingLeft: 34, top: 2 }, label: […]

Android WebView硬件加速Artefact解决方法

因此,Android中存在WebView硬件加速的已知错误,请参阅此处: https : //code.google.com/p/android/issues/detail?id = 17352 禁用硬件加速不是我的选择。 我读过这些很棒的参考资料: Android webview很慢 https://plus.google.com/+PaulIrish/posts/ccP98BTMd5Z http://riamobilesolutions.com/android-webview-scrolling-performance/ 我的问题是,如果打开HWA,是否有人知道任何CSS / HTML变通方法以防止可能发生的渲染伪像? 当我将焦点放在表单字段时,我只看到它们,它似乎会导致vsync-esque和subpixel gitches。 当我专注于该领域时,整个页面似乎抖动。 似乎position: absolute也与此有关。 有人有解决这个问题的经验吗?

将CSS注入到android中的webview网站

例如,我想将www.google.com的背景颜色更改为red 。 我使用了webview ,我的style.css文件在assest folder 。 我想将此style.css文件注入www.google.com 。 我的代码出了什么问题? 请为我写正确的代码。 谢谢。 我的MainActitviy.java文件: package com.example.mysina; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.webkit.WebView; public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webView = new WebView(this); setContentView(webView); String html = ” src: url(‘file:///android_asset/style.css’)”; webView.loadData(html, “text/html”, “utf-8”); webView.loadUrl(“https://www.google.com”); } […]

适用于Android的chrome中的模糊SVG图像

为了逃避手机中不同像素密度的地狱,我在我的CSS中使用SVG文件作为背景图像。 Chrome for android似乎渲染inline-svg就好了,但是如果svg失败了 用于background-image和普通url的CSS 用于带有background-image和数据uri的css 与image元素一起使用 android 4的股票浏览器工作得很好。 (以及我试过的所有其他手机) 你可以访问这个小提琴并检查出来。 放大以查看差异。 任何人都知道为什么chrome在这里使用了一些预先渲染的位图?

如何模拟:在非链接元素上的android中的活动css伪类?

我希望能够模仿Android webkit中所有元素的:active伪类的行为。 目前, :active语法仅适用于元素(链接)。 我正在处理的应用程序中几乎所有可操作元素都不是标准链接标记。 iOS webkit支持:active对所有元素都:active 。 /* works on both android iOS webkit */ a:active { color: blue; } /* works on iOS webkit, does not work on android webkit */ div:active { color: red; } 我find了一些解决类似问题的资源[1,2],但它们都有点沉重,我想知道是否有一个重量较轻的解决方案我无法find。 http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone http://code.google.com/intl/ro-RO/mobile/articles/fast_buttons.html