Tag: css

JQueryUI的可拖动加-webkit溢出滚动隐藏拖动元素？

我有一个滚动的div在iPad2上使用-webkit-overflow-scrolling:touch; 。 在里面，我有可拖动的元素使用TouchPunch和TouchPunch通过触摸拖动移动。 我非常接近完美的工作，但是我发现了一个问题。 使用这样的div设置，我的JQueryUI draggable helper对象不会浮动其他所有东西。 随着-webkit-overflow-scrolling ，它漂浮正常，但滚动波涛汹涌。 有两种方法可以获得两全其美吗？ 这是一个JSBin，请使用iPad或iPhone查看问题！ 这里是JSBin的编辑视图 提前致谢！

iOS divdynamic滚动没有固定的高度（内容通过ajax加载）？

我正在创build一个具有固定的div（比如说200px高度）的iOS web应用程序以及该滚动内容。 我不喜欢默认的iOS滚动，因为它不像通过向下滑动浏览网页所发现的本地滚动（iOS中的本地滚动具有动量，而默认的overflow没有动量）。 我试图滚动的div有以下特质： 设置宽度 dynamic高度（通过AJAX的内容） 使用jQuery AJAX将内容从外部网站加载到div ，并且可以select重新加载AJAX请求。 这意味着，取决于加载页面中的内容量， div的高度将会改变。 我似乎无法find任何解决scheme，允许dynamic滚动iOS的div没有一套，我已经尝试了以下内容： – webkit-overflow-scrolling: touch iScroll 和这些问题： 这是我的第一select，因为它只是一个css标签，通常工作正常。 这是新的，但有很多的错误，包括一个为我的networking应用程序的交易断路器。 如果您focus在一个input元素上，那么页面会放大（即使meta标记设置为user-scalable:no ），并且不会缩小，直到您在文本框中键入文本，然后所有内容都以3px 。 这个解决scheme是滞后的，高度需要固定。 使用它的刷新function太麻烦了，因为在重新加载AJAX请求，重新加载页面，隐藏元素等时需要调用它。 TL; DR：除了-webkit-overflow-scrolling和iScroll ，还有什么解决scheme可以让我在iOS中使用dynamic高度（通过AJAX加载内容）的dynamic卷动吗？

如何为移动设备应用不同的CSS，而不仅仅是基于媒体宽度/高度

我想为移动设备，手机和平板电脑的某些元素显示不同的CSS样式，但是具有不同宽度的媒体查询效果不佳，因为我们说我的手机和我的17英寸笔记本电脑都具有相同的全高清分辨率和现代平板电脑的分辨率比大多数桌面显示器都要大 所以我想要应用Android，iphone / ipad，黑莓，Windows手机/平板电脑的移动设备的CSS样式。 有什么办法吗？

cordova/一般：为不同的屏幕布局开发最简单的方法？

我真的很想知道什么是最简单的方法，与Phonegap / Cordova结合，使您的应用程序支持多种屏幕分辨率？ 主要是所有的Android的，如480×800,720x1280x 1280×720,800×1200等？ 我已经创build了一个只有百分比的应用程序（ 点击 ）（在所有16：9屏幕上显示效果会很好，但没有），但这还不够。 只有在720×1280的屏幕上显示确定。 尤其是select部署手机作为平板电脑似乎是不可能的，由于完全不同的方向..和更大的屏幕导致一个全新的用户界面（用户最佳性能）。 我能想到的唯一方法是为每个分辨率创build一个不同的样式表，这可能占用大量的时间; 我猜？ 期待反馈，谢谢！

Phonegap Cordova Statusbar插件创build双条

我正在使用手机上的应用程序。 通过CLI构build，而不是手机构build。 我遇到了cordova-plugin-statusbar插件的问题。 它会打开时添加一个额外的酒吧高度。 这是它的样子。 双高度菜单栏： 我已经用两种方式实现了状态栏。 首先通过添加标签到config.xml <platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> <preference name="StatusBarStyle" value="default" /> <preference name="StatusBarBackgroundColor" value="#000000" /> </platform> 我也做了这个与JavaScript，（通过首先删除configuration标签），并添加以下到我的DeviceReady函数 StatusBar.overlaysWebView( false ); StatusBar.backgroundColorByHexString('#000000'); StatusBar.styleDefault(); 要看看发生了什么，我已经改变了颜色，我得到了这个 双状态栏2种颜色： 当我删除一切或设置overlaysWebView为'真'，我没有间距，我的内容是在菜单栏下。 StatusBar.overlaysWebView( true ); 这导致我相信我没有CSS问题。 另外，我经历了我的CSS，没有看到任何会增加这一点。 我的CSS是非常基本的。 /* Style Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, […]

iOS – iFrame中的原生滚动

所以我有一个iFrame显示Facebook页面，我试图启用本机“反弹”types的滚动，但无法获得任何工作。 我试过这个： iframe { overflow-y: scroll !important; -webkit-overflow-scrolling: touch !important; } 但迄今为止没有运气 – 在模拟器和真正的iOS设备上testing。 有任何想法吗？

CSS背景延伸到Safari浏览器，但不是在iOS上

这个CSS成功地拉伸了我的背景图片，以填充100％的屏幕区域，而不是在Safari上滚动，但不在iOS上滚动。 我怎样才能防止在iOS上滚动的图像？ body { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: url(../img/background.jpg) center repeat-x; background-size: auto 100%; background-attachment: fixed }

Phonegap – iOS键盘和下拉“压缩”的Web视图，因为单位

随着离子/ phonegap应用程序，我有这个问题（只在iOS）。 当用户需要写一些select和选项时，会出现iOS控件（键盘或下拉菜单），并在网页视图压缩到一半。 我在CSS中使用vh和vw来测量单位。 我做了什么/试过了： 这个post在离子的论坛 OP解决了它通过改变vh和vw单位回像素。 对我来说这不是一个解决scheme。 使用方法的离子键盘插件 cordova.plugins.Keyboard.disableScroll(true); 没有工作。 尝试错误和真实。 添加参数到元标记非工作。 我目前的元： <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" /> 键盘被隐藏时的图像： 显示键盘时的图像： 在第二张图片上，您几乎无法读取左侧文本 – 右侧文本，因为input的高度为24vh。 我创build一个虚拟页面，我不使用 vh和vw，这工作正常。 在Android上工作也很好。 看起来，当键盘或下拉出现的视口的高度是resize和适应它的大小。 由于我不能改变它px我正在寻找其他的select

在iOS中显示不同大小的input字段

我有一个背景和固定宽度/高度的input字段。 它在我的桌面上的所有浏览器看起来不错。 但由于某种原因，它在iPad和iPhone上看起来更大。 我尝试了几个Css的技巧，但迄今为止没有任何工作。 width: 120px !important; background-image:url('../img/header-input.png'); height: 30px; -webkit-appearance: none !important; -webkit-border-radius: 0; border-radius:0; @include border-radius(0); outline: none; border: none;

视口宽度更改后在iOS上重置缩放

我们正在制作一个HTML5应用程序，在devise时不知道宽度。 所以我们在运行时改变视口标签来匹配所需的尺寸。 例如 <meta name="viewport" id="viewport-meta" content="width=' + params.mobilePortraitWidth + ', initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 在iOS上的问题是，我们改变视口大小后，视图不能正确缩放，直到我们双击屏幕。 编辑，双击后，所有罚款，所以：我们如何可以“双击”编程？ 非常感谢你