标签: mobile-website

所以我构建了一个漂亮,闪亮的HTML5应用程序,针对移动Safari和Android的默认浏览器.我正在测试它的Android版本是2.1和2.2.

我的应用程序在其中一个页面上有一个文本区域,而这个文本区域有时会包含大量文本.它基本上是一个自由形式的写作领域.

这在iOS中可以正常工作.然而,在Android上,当你输入时,屏幕会在每次击键时上下滚动,通常你无法看到你输入时输入的是什么,并且你会从所有的跳跃中感到头晕目眩.此外,如果文本区域内的内容超过其高度,则似乎无法在其中滚动.

甚至不让我开始横向模式.上述问题在那里更加明显.

这感觉就像Android的一个错误,因为我的textarea真的没什么特别的.我把它剥离到了必需品,它的行为也一样.

想知道是否有其他人在Android上的textareas有这么多的乐趣,可能会给出一些建议,或者至少是同情？

谷歌似乎已经成功地在Android的Gmail网络界面中解决了这个问题.我猜测有一些JS魔法正在进行,因为我的标记/ CSS是相同的.

我遇到了一个奇怪的问题.我目前正在使用HTML5和CSS3仅为iOS 6制作移动网络应用程序.

然而,当input元素接收焦点并且显示软键盘时,滚动窗口以使输入不被键盘遮挡(即使它不会在任何情况下).

我已经阅读了SO和通过谷歌,可以添加以下内容以防止此行为(在UIWebView中查看此内容时):

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

但是,似乎在iOS 6中,即使窗口最初滚动到0,0,它也会再次滚动以使聚焦元素居中.有没有其他人遇到这个,他们知道iOS 6的修复？

嗨,我有一个Web应该能够在智能手机和桌面浏览器上运行.虽然我期望在像Iphone这样的小型设备上获得一些奇怪的行为,但我非常有信心它会在Android Galaxy Tab上运行良好,这是我现在可以运行测试的Android设备.

现在我在Galaxy Tab上安装了一堆浏览器来测试:

• Android Native Browser
• 适用于Android的Chrome
• 适用于Android的Firefox

在我使用过的桌面上

• 火狐
• 谷歌浏览器

最后我有一个Iphone来测试.

该网站使用HTML5画布进行像素和基于精灵的绘制,没有花哨的变换,滤镜或效果,主要是简单的路径和多边形.我会听触摸事件并使用requestAnimationFrame正确的重绘.

总体而言,该应用程序在桌面浏览器上运行良好,它在iOS Safari(iPhone)和Firefox-on-Android上运行良好.Androids Native Browser给我带来了麻烦.我已将其设置为当javascript没有响应时屏幕刷新红色,并且在触摸屏幕时它几乎总是闪烁.

所以我想知道Android Native App和HTML5是否存在任何已知问题.由于本机浏览器的名称不存在,因此很难获得有关此内容的Google信息.有什么想法,我可以获得更多信息？什么可能导致本机Android浏览器滞后的想法？

关于这个问题有一些想法:

• iOS不支持requestAnimationFrame,因此我将其替换为基于超时的替换.如果我在Android的本机浏览器上使用该替换,问题仍然存在.

• 我经常使用AJAX(google clojure xhrio)从服务器检索数据.可能是数据检索回调是cloggin我的事件管道？

• 是否已知日志控制台消息(console.log)会降低应用程序的速度？他们可以触发浏览器重新运行DOM树或任何相关的东西吗？

我将这个网站嵌入到我的应用程序中,如下所示:

NSString *url = [NSString stringWithFormat:@"https://mobile.twitter.com/search?q=%@", @"@test OR #test"];
url = [url stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
[self.twitterWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];

self.twitterWebView.scalesPageToFit = YES;

我在这个网站上有两个按钮可以前后移动.我在打电话

[self.twitterWebView goBack];和
[self.twitterWebView goForward];相应.

这在iOS 6上工作正常,但在iOS 7上,我的web视图的canGoBack和canGoForward属性为NO,因此我的后退和前进按钮不起作用.

作为旁注,当第一次安装应用程序,并且第一次加载页面时,我的按钮工作.但是当我再次运行我的应用程序时,当我点击网站上的链接时,我的网页视图的canGoBack属性开始返回NO.

我怎么解决这个问题？

编辑:我上传了一个迷你测试应用程序来演示我的问题.你可以从这里下载.请在iOS 7模拟器上运行该应用程序,看到后退按钮正在处理应用程序的首次安装.然后退出,再次运行应用程序,你会发现它将停止工作.

顺便说一下,这个问题似乎与推特移动网站有关.您可以尝试其他网站地址并查看.

我正在创建一个混合桌面/移动网站,它们共享相同的页面,也就是说我没有两个单独的桌面和移动网址.我试图让Facebook链接在本地Facebook应用程序中打开,如果可能的话,否则转到常规URL.Facebook方案中有没有自动处理的东西？

基本上,如果未安装移动应用程序或用户在桌面上,请访问:https://www.facebook.com/pages/ [pageid]

如果已安装移动应用,请转到此处:

FB://页/ [的pageid]

我很难找到一种简单的方法来检测请求是否来自我的Django视图中的移动设备.

我试图实现这样的事情:

#views.py

def myfunction(request):

    ...
    if request.mobile:
        is_mobile = True
    else:
        is_mobile = False

    context = {
        ... ,
        'is_mobile': is_mobile,
    }
    return render(request, 'mytemplate.html', context)

并在mytemplate.html:

{% if is_mobile %}    
    show something
{% else %}
    show something else
{% endif %}

我检查过的每个地方(例如这里或这里),建议使用minidetector.我已经安装了不同的版本:pip install minidetector,pip install minidetector2以及直接的几个github存储库,但它们都没有与Python 3兼容.

所以这里我的问题:是否有任何与Python 3兼容的minidetector版本/分支？如果没有,有哪些替代方案？

我想实现一个带有用于移动和PC的独立用户界面的Web应用程序.你知道我怎么能检测它是否是移动的？一般来说,您对在GWT中实施此类应用有什么建议吗？

我正在尝试为移动触摸事件实现Google的"快速"按钮,而我似乎陷入困境.我正在尝试设置它以便我可以链接到快捷按钮,但我似乎无法使我的库结构正确.当我尝试在链接上运行for循环时,最终发生的是fastbutton重新进入.

我确定这只是我设置图书馆的方式.有人可以看看吗？谢谢!

http://code.google.com/mobile/articles/fast_buttons.html

    ;(function() {
/*Construct the FastButton with a reference to the element and click handler.*/
this.FastButton = function(element, handler) {
    console.log('fastbutton init');
    this.element = element;
    this.handler = handler;
    console.log(this);
    element.addEventListener('touchstart', this, false);
    element.addEventListener('click', this, false);
};

/*acts as an event dispatcher*/
this.FastButton.prototype.handleEvent = function(event) {
    console.log(event);
    switch (event.type) {
        case 'touchstart': this.onTouchStart(event); break;
        case 'touchmove': this.onTouchMove(event); break;
        case 'touchend': this.onClick(event); break;
        case 'click': this.onClick(event); break;
    }
};

/*Save a reference to the touchstart coordinate and start listening to …

既然Html5Boilerplate已达到2.0版并且面向移动优先设计,那么Html5Boilerplate Mobile是否还应该用于移动优先网站？只想问b/f我挖掘每个代码.

看起来一个明显的区别是Html5Boilerplate已经从CSS重置切换到标准化,并添加了诸如respond.js和移动媒体查询部分之类的移动优先方面.标准样板也在Github上更活跃.有人对这两个有什么看法吗？

我正在构建一个用于手机的单页Web应用程序.应用程序应该实现"屏幕"之间的转换(像任何其他移动应用程序,例如Facebook,Twitter),这些转换应该是动画的(向左滑动).每个屏幕必须保持其在过渡之间的滚动位置.

一个明显的解决方案是:

Viewport
+----------+ 
|+--------+| +--------+ +--------+ +--------+
|| DIV1   || | DIV2   | | DIV3   | | DIV4   |
||        || |        | |        | |        |
||        || |        | |        | |        |
||        || |        | |        | |        |
||        || |        | |        | |        |
|+--------+| +--------+ +--------+ +--------+
+----------+

将不同的屏幕放入容器(DIV1,DIV2,......)中,这些容器的样式适合屏幕(position: absolute; width: 100%; height: 100%; top: 0)并具有overflow-x: scroll.容器彼此相邻,过渡就像动画一样容易left.

容易到目前为止.

问题如下:在此实现中,当用户向下滚动时,地址栏不会在移动浏览器中消失.

我在谈论这个功能:

这是因为移动浏览器只有在用户滚动时才会这样做body- 而不是在容器中滚动body …