标签: mobile-webkit

我在移动网站上的表单中有一系列选择元素.这些选择元素位于通过JS和CSS3变换处理的滚动窗格内部,因此首先获得触摸/单击/任何事件以在选择上进行注册就足够了.但是,我现在发现,仅在Android上,即使选择被点击,并且正在获得焦点 - 他们只是拒绝打开.我100%肯定选择正在获得他们的焦点事件(通过调试),所以老实说,我完全被难倒了.没有调试,选择上没有其他焦点/模糊事件.它适用于iPhone ......任何想法？

我正在编写一个带有Map的页面,我需要捕获地图上Tap/Click的位置并存储坐标.我正在使用OpenLayers js.在桌面浏览器(IE/FF/Chrome)上,这很好用.在移动设备上,可以在默认的Android浏览器上(在实际设备和模拟器中)正确捕获分路器.

然而,在移动webkit浏览器(iPhone Safari和Android Chrome Beta)上,我们遇到的问题是,在实际点击的较高(朝北)几个像素处捕捉到水龙头.错误未修复(因此,我不能只为事件的xy添加100以重新校准顶部.)

这是我用作clickhandler的代码:

OpenLayers.Control.ClickHandler = OpenLayers.Class(OpenLayers.Control, {                
    defaultHandlerOptions: {
        'single': true,
        'double': false,
        'pixelTolerance': 0,
        'stopSingle': false,
        'stopDouble': false
    },

    initialize: function(options) {
        this.handlerOptions = OpenLayers.Util.extend(
            {}, this.defaultHandlerOptions
        );
        OpenLayers.Control.prototype.initialize.apply(
            this, arguments
        ); 
        this.handler = new OpenLayers.Handler.Click(
            this, {
                'click': this.trigger
            }, this.handlerOptions
        );
    }, 

    trigger: function(e) {
        that.inputLonLat_EPSG4326 = null;

        var lonlat = that.inputMap.getLonLatFromViewPortPx(e.xy);

        that.logMessage("XY " + e.xy);
        that.logMessage("LonLoat " + lonlat);

        that.inputMarkers.clearMarkers();


    that.inputMarkers.addMarker(new OpenLayers.Marker(lonlat,that.icons["green"].clone()));

    lonlat.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));

    that.inputLonLat_EPSG4326 = lonlat;
    // For the moderation …

在iPad3上设置webkit透视图CSS属性会使子元素渲染非常模糊,如果它们用于非视网膜显示,则渲染图像.要明确我不是在谈论渲染模糊的图像,DOM子元素渲染模糊.

可以做些什么呢？

简单地删除属性不是一个选项,因为我使用需要在Z轴移动的动画.

属性在CSS中设置如下:

-webkit-perpective: 500;

感谢您的帮助!

这似乎是webkit-transform在一个元素或它的父元素上应用一个属性,它webkit-over-flowing-scrolling: touch完全打破了滚动,因为滚动根本不起作用.

有没有人遇到过这个bug并知道解决方案？

这是我在论坛上的第一篇文章,所以如果我的标签,论坛或内容错误,请教育我.

我正在开发一款针对iPhone和Android的应用,这是一个基于位置的实时社交网络.该应用不会通过市场/应用商店进行部署.

根据我的理解,我唯一的选择是制作一个网络应用程序(HTML5/JS).除了需要向其他用户发送推送通知之外,所有功能都应该是支持.

我考虑的选项是: - 发送电子邮件,但这不是非常实时. - 发送短信,但这会产生一些重大成本. - 链接到用户选择的IM并通过该IM发送通知

我理解所有跨平台框架,因为PhoneGab编译为本机,需要通过应用程序商店进行部署以利用他们的API(如果我错了,请纠正我).

任何简单的解决方案,基于位置,推送通知应用程序框架将在应用程序商店外提供？

编辑:我希望通过网站分发应用程序.

编辑:应用程序服务是一个约会概念在轻微的袖子边,所以我担心它不会通过审查门,因此无法在商店分发.当然我可以尝试使用PhoneGap或Titanium,然后在没有通过的情况下进行webapp.

感谢您的支持!

我只在Safari上有一个奇怪的问题(奇怪的是？LOL).如果您使用的是iPhone,iPad或桌面Mac,则无关紧要; Safari使用动画关键帧和变换进行错误的计算定位徽标.

问题是徽标需要移动到他的房间,但在safari上徽标也向左移动,当关键帧达到100%时,徽标完全适合他的房间.

你可以看到奇怪的效果:https://amonarraiz.com(访问Safari不同于访问另一个浏览器,代码是相同的).

这是我的代码:

.intro-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.intro-logo {
  background: url(https://amonarraiz.com/css/img/slider/2.png) center center no-repeat;
  background-size: cover;
  width: 50rem;
  height: 41rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-86%, -52%);
  -webkit-transform: translate(-86%, -52%);
  transform: translate(-86%, -52%);
  opacity: 0;
  cursor: pointer;
}

.intro-in {
  -moz-animation-duration: 3.75s;
  -webkit-animation-duration: 3.75s;
  animation-duration: 3.75s;
  -moz-animation-name: intro-in;
  -webkit-animation-name: intro-in;
  animation-name: intro-in;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1; …

如何制作这个按钮是带有角度,投影,插入阴影的CSS,宽度是否灵活？

我试图在这里http://jsfiddle.net/jitendravyas/6RsnN/,但不要如何给它角度以及如何在它周围创建切口边框.

按钮的宽度应灵活.

我只是为iPhone制作这个,所以允许完整的CSS3.

我是电话新闻的新手.我想知道手机差距和移动网站之间有什么区别.我为此瞪眼了,但我找不到任何合适的解决方案.可以解释这个或提供一些文件.

我试图将2个参数传递给javascript函数.这个代码在webview.loadUrl("javascript: function_to_call();");没有参数的情况下正常工作,但我不能将它与参数一起使用.

这是javascript结:

function changeLocation(_lon , _lat){
    var zoom=16;
    var lonLat = new OpenLayers.LonLat( _lon , _lat ).transform(         
        new OpenLayers.Projection("EPSG:4326"), 
        map.getProjectionObject());

    map.setCenter (lonLat, zoom);
}

这就是我从java中调用它的方式:

webView.loadUrl("javascript:changeLocation( -0.1279688 ,51.5077286 );") ;

编辑:我找不到问题,我改变了我的方法,现在我在每次需要时注入完整的javascript函数和所需的更改.这不是最好的解决方案,但它有效.感谢大家的帮助.

在桌面 Webkit 上，我的图像显示正常，没有任何问题。在移动 Webkit（例如 iPad iOS 5）上查看时，会出现明显的白色边框。我使用 background-image 和 background-size 因为我的元素有一个固定的比例，但图像源本身可以是任何随机比例。

JSFiddle：

http://jsfiddle.net/tokyotech/A2zAv/

HTML：

<img />

CSS：

body {
    background: #666; }

img {
    width: 8em;
    height: 8em;
    display: block;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1),
        0 1px 0 rgba(0,0,0,0.5) inset;
    background-size: cover;    
    border-radius: 0.4em;
    background-image: url(http://1.bp.blogspot.com/_yhfaur8OkQ0/SwQzJkzYt5I/AAAAAAAAAtU/5eIqHFmS63s/s400/ev.jpg); 
}

我在谷歌上做了一些研究,但我找不到任何适用于Windows Mobile 6的HTML5浏览器.我在HTML5中寻找的主要资源是WebDatabase和/或localStorage.

通过一些研究,我找到了Iris(http://www.freewarepocketpc.net/ppc-download-iris-browser.html),这是一个基于Webkit的浏览器,具有一些HTML5功能,但是localStorage和Web数据库不适用于它.

有没有人知道任何具有Windows Mobile 6存储功能的浏览器？