我是一名网络开发人员,我想将我的网络产品移至iPhone.其中一个产品就像Google地图:在手机屏幕上显示地图,您可以拖动或调整地图大小并查看我们添加到地图中的一些信息.
我知道有一些技术可以让您使用HTML,CSS和Javascript来开发本机iPhone应用程序.我发现了一些:
还有其他同类产品吗？它们之间有什么区别？我该选哪个？
我需要为iphone/android手机开发一些html页面,但是max-device-width和之间的区别是max-width什么？我需要为不同的屏幕尺寸使用不同的css.
@media all and (max-device-width: 400px)
@media all and (max-width: 400px)
有什么不同？
在styles.css中,我使用的是媒体查询,两者都使用以下变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时,网站会在常规浏览器(Safari,Firefox)中调整我想要的布局,但是,手机上根本不会显示移动布局.相反,我只看到默认的CSS.
谁能指出我正确的方向？
我正在开发一个手机网络应用程序,我有几个可以从中受益的文本字段<input type="tel"/>.iPhone会为用户调整键盘,但我担心会破坏向后兼容性.我希望支持这一点的浏览器/手机可以帮助用户和其他浏览器回归到标准文本字段？这是可接受的做法吗？它甚至有用吗？
我正在开发一个基于iPad的网络应用程序,需要防止过度滚动,以免它看起来像网页.我目前正在使用它来冻结视口并禁用过度滚动:
document.body.addEventListener('touchmove',function(e){
e.preventDefault();
});
这可以很好地禁用过度滚动,但我的应用程序有几个可滚动的div,上面的代码阻止它们滚动.
我只针对iOS 5及以上版本,所以我避免使用像iScroll这样的hacky解决方案.相反,我将这个CSS用于我的可滚动div:
.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y:auto;
}
这没有文档overscroll脚本,但不解决div滚动问题.
没有jQuery插件,有没有办法使用过度滚动修复但免除我的$('.scrollable')divs？
编辑:
我发现了一些不错的解决方案:
// Disable overscroll / viewport moving on everything but scrollable divs
$('body').on('touchmove', function (e) {
if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});
滚动浏览div的开头或结尾时,视口仍会移动.我想找到一种方法来禁用它.
我想知道我是否要开发移动网络应用程序(现在,两周或一个月内),我应该选择哪一个？移动Web开发人员会选择哪一个？
如果jQM 1.0今天正式发布,我很可能会接受它(只要它实际上实现了它所承诺的).既然它是alpha版本,我想知道是否值得进入商业级项目？Sencha Touch会更好吗？
元标签"Viewport","MobileOptimized"和"HandheldFriendly"可用于向移动设备提供适当格式化的HTML内容.这些标签是好东西吗？在许多情况下,它们看起来非常特定于平台,即使不是特定于平台(视口),它们似乎也需要特定于设备的属性才能正常工作.
他们应该被使用吗？何时何地使用它们是合适的？有替代方案(没有用户代理识别)吗？
注意:我一直在使用CSS媒体查询来实现移动支持,但这需要一些UAR才能获得优化的字体大小.
我有一个问题,在我的网站的某些手机上出现水平卷轴.我试图把overflow-x:隐藏起来,但它没有用.宽度是自动的,因此它实际上会自动调整网页大小以适合屏幕大小.所有其他手机都很好,除非在黑莓,诺基亚e52和Windows手机上观看,水平滚动会出现.
有什么建议？谢谢!
title如果我想提供更多信息,我目前设置了一些HTML 的属性:
<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>
然后在CSS中:
.more_info {
border-bottom: 1px dotted;
}
工作非常好,可视指示器移动鼠标,然后弹出更多信息.但是在移动浏览器上,我没有得到那个工具提示. title属性似乎没有效果.在移动浏览器中提供有关文本的更多信息的正确方法是什么？与上面相同,但使用Javascript来监听点击,然后显示工具提示外观对话框？有没有本机机制？