标签: iphone-web-app

我有这个代码:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

在iPhone上运行全屏网络应用程序.

从此列表中选择内容时,iPhone会放大select-element.并且在选择某些内容后不会缩小.

我怎么能阻止这个？或缩小？

我最近一直在研究移动网络应用程序.我正在优化移动优先,现在专注于iPhone的iOS.我不想要原生应用程序的精确外观,但我认为原生的感觉是绝对重要的.我已经制作了标记和CSS以反映这个想法,让我留下这个(注释以更好地理解我后来遇到的问题):

这一切都没有问题,它还具有原生的感觉,静态页眉和页脚,以及可滚动的内部视图(由于-webkit-overflow-scrolling: touch).

任何使用iOS超过5分钟的人都知道,当你向上或向下滚动时,你会得到一些不错的动力滚动.此外,当您点击列表顶部时,您会获得良好的"反弹"效果:

我觉得这有助于定义iOS的感觉,这么小的细节可以走很长的路.幸运的是,如果您位于webapp中可滚动元素的列表顶部之下,并滚动到顶部,则会获得相同的效果.这是期望的行为:

但是,当您位于列表顶部并尝试重新创建相同的弹跳行为时,列表顶部(例如上面的设置.app),我们会得到以下行为,这是不希望的:

我在Stack Overflow上看过一些类似的 问题,但这些都选择禁用弹跳.我想知道是否可以保持弹跳,但总是让它发生body section section#main,而不是在webapp的chrome上.我不是在使用jQuery,所以我更喜欢使用直接JavaScript的答案(尽管CSS解决方案的奖励积分).

这是一个包含所有代码的GitHub 仓库(Sinatra,HAML和Sass;当前分支so),或者是带有损坏图像和链接的JSFiddle,但在iPhone上显示问题(最好添加到主屏幕进行测试).

我需要在50米内确定一个人的位置.我想知道我是应该一次又一次地使用navigator.location.watchPostion()或打电话getCurrentPostion(). watchPostion()是正确的W3C API,用于做我想要的,但实际上,它似乎是矫枉过正.

这是我的代码:

var map = null;
var marker = null;
var layer = null;

function locFn(pos) {

  var lat = pos.coords.latitude;
  var lon = pos.coords.longitude;

  $("#hlat").val(lat);
  $("#hlong").val(lon);

  document.getElementById("lnkMap").href = 
    "http://maps.google.com/maps?q=My+Loc@" + lat
    + "," + lon + "&z=18&t=h";

  var point = new GLatLng(lat, lon);

  if (pos.coords.accuracy < 100) {
    map.setCenter(point, 18);

    if (marker != null) {
      marker.setLatLng(point);
    }
    else {
      var ico = new GIcon();
      ico.image = "img/Blue-Dot.png";
      ico.iconSize = new GSize(22, 22); …

试图隐藏作为主屏幕图标书签的Web应用程序的Safari UI组件.我正在使用这个元标记

<meta name="apple-mobile-web-app-capable" content="yes" />

在iPhone开发人员中心指定,但从主屏幕图标启动时,地址栏和工具栏仍然存在.我需要做些什么呢？有人有例子吗？

当用户将手机从纵向模式旋转到横向模式时,我正试图弄清楚如何更改嵌入式网页 - 基本上是为了加载更适合更宽屏幕格式的视图.这可以不从服务器调用新页面,即从CSS/Javascript本身驱动它吗？

谢谢!

我有一个适合webapp(主屏幕)高度的问题.我使用以下元标记:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

我的问题是,屏幕顶部和底部有黑条.首先我想,由于屏幕较高,这是iPhone 5的一个错误.但是今天我看到了一个适合iphone5屏幕的webapp(apps.ft.com/).

任何想法,我做错了什么？

这里是我完全相关的元标记

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/ios_icon_72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/ios_icon_114.png">

编辑:经过一个小时的搜索,我找到了解决方案如何强制浏览器适应全高度.当我定义一个启动图像(apple-touch-startup-image)时,我的iphone只适合高度.这是我的代码:

<!-- iPhone 4 (Retina) -->
<link href="img/icons/apple-touch-startup-image-640x920.png" 
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" 
      rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="img/icons/apple-touch-startup-image-640x1096.png" 
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" 
      rel="apple-touch-startup-image">

是否可以从独立的Web应用程序中的iPhone弹出键盘中删除表单助手？我知道普遍的共识是它在Mobile Safari中是不可能的,但是一个独立的应用程序在a中运行UIWebView,并且在几个方面(示例)的功能不同,所以我希望这可能是可能的.

您可以在键盘正上方看到它:

Previous和Next按钮在<form>输入之间循环.但我有一个<input>元素,所以他们被禁用.完成按钮隐藏键盘,但由于我有一个高度灵活<ul>(占用键盘和之间的空间<input>),而我在此页面上没有任何其他内容,它没有任何意义.

在一个小屏幕上,几乎有一半的屏幕被键盘占用,构成这个工具栏的44个像素是一个巨大的空间浪费(一个整体<li>的价值).

原生iOS应用程序可以删除它,所以我知道它至少可以在手机上,我只是没有发现在Web应用程序中这样做的方法.这是来自Facebook应用程序,页面非常类似于我的:

我尝试过使用一个<input>没有包装<form>而且还使用了一个contenteditable <div>,但结果是一样的.有几种自定义-webkit-样式可以控制Web应用程序界面的各个方面,但是它们的文档记录很少,而且搜索没有任何内容.

有没有办法删除网络应用程序中的表单助手？

我正在构建一个全屏iPhone优化的网络应用程序.它像主机应用程序一样从主页启动,并且通过以下指令表现得像一个独立的应用程序,但它只是简单的HTML/CSS/JavaScript,没有涉及PhoneGap.

<meta name="apple-mobile web-app-capable" content="yes" />

尝试通过OAuth进行身份验证时,重定向到Twitter(或任何其他OAuth提供商)会将我从我的全屏网络应用程序转移到Mobile Safari中.Twitter身份验证完成后,重定向回我的应用程序不会启动我的主页应用程序,而只是在Mobile Safari中重定向.是否可以在iPhone主页Web应用程序中执行OAuth？除此之外,我可以获得OAuth回调以重新启动我的主页Web应用程序吗？

我正在构建一个游戏作为iPad的webapp.它结合了一个摇动动作来触发其中一个屏幕的事件,但是,由于它还有一个信息收集表单,有时摇动动作会触发恼人的"摇动撤消"对话框.当用户到达摇动动作时,用户输入的表单输入甚至不再存在于DOM中,所以在我看来不应该触发撤销功能,但遗憾的是它是.没有办法将它包装在本机包装器(PhoneGap或其他)中,所以我想知道是否有人知道是否可以通过CSS或JavaScript禁用特定网页/应用程序的此功能？

谢谢.

你知道如何将一个网络应用程序添加到iPhone的主屏幕......现在我如何检测我的应用程序是否已添加到用户iPhone的主屏幕.

如果已添加,我如何启动存储在用户主屏幕而不是Safari中的应用程序.

NOTE : its a web app simply bookmarked on the home screen of an iPhone - it is NOT a native app.

有任何想法吗 ？