Html5支持iPhone触屏的脚本应该怎么写

一般般的写法:

Js代码

$("#u_obj_id").bind('touchstart', function (e) {
point = hasTouch ? e.originalEvent.touches[0] : e;
// point 代表触屏点
// some action
})

如此使得js代码支持移动设备的触屏事件。

如果对效果要求更高则可以使用 jquery-mobile 来实现。不过页面行为还需要在研究。

其他Iphone应用代码摘录:

禁止Safari浏览器下 旋转iPhone时自动调整文字的大小。当您旋转的iPhone,Safari浏览器调整文字的大小。
如果由於某种原因您希望阻止这种效果,只需使用下列CSS声明。

在- WebKit的文本尺寸的调整 是一个WebKit的只CSS属性,使您可以控制文本的调整。

Html代码

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6
{-webkit-text-size-adjust:none;}

由於iPhone允许其用户在纵向和横向模式下浏览网页,您可能需要检测浏览者正以何种模式查看您的网页。

这个JavaScript函数可以方便地检测当前iPhone方向,将适用於特定的CSS类,您可以在css中定义它的风格。
请注意,在这个例子中,CSS类添加到ID: page_wrapper 。

Js代码

window.onload=function initialLoad() {
updateOrientation();
}
function updateOrientation(){
var contentType = “show_”;
switch(window.orientation){
case 0:
contentType += “normal”;
break;
case -90:
contentType += “right”;
break;
case 90:
contentType += “left”;
break;
case 180:
contentType += “flipped”;
break;
}
document.getElementByIdx_x(“page_wrapper”).setAttribute(“class”, contentType);
}

定义iPhone / iPod专用的CSS样式

嗅探器可以是有用的,但对许多原因,这并不是用来检测浏览器的最好做法。 如果您正在寻找一个更简洁的方式为iPhoen定义CSS样式,你应该使用以下代码。
它必须在常规的CSS文件粘贴。

Html代码

@media screen and (max-device-width: 480px){  
  
}

自动隐藏工具栏

在小屏幕上,如iPhone屏幕上,工具栏有时是有用的,但也浪费了大量的空间。
如果您想让Safari浏览器工具栏默认情况下隐藏,使用以下JavaScript代码。

Js代码

window.addEventListener('load', function() {  
    setTimeout(scrollTo, 0, 0, 1);  
}, false);

特殊链接的使用

你还记得几年前“mailto”一类链接是非常普遍的? 此前缀自动打开默认的电子邮件客户端的人。
iPhone已经推出了两款类似的前缀,tel和sms,这也许这将是对你有用。你唯一要做执行这一点,是要粘贴以下的任何地方您的HTML网页。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, css
, 网页
, 浏览器
, iphone
代码
触动精灵怎么写脚本、触摸精灵怎么写脚本、脚本怎么写、视频脚本怎么写、拍摄脚本怎么写,以便于您获取更多的相关知识。

时间: 2024-08-07 08:49:33

Html5支持iPhone触屏的脚本应该怎么写的相关文章

网页-html5+js手机触屏事件在一个固定的区域内实现div的移动

问题描述 html5+js手机触屏事件在一个固定的区域内实现div的移动 我想在手机网页上实现在一个固定的区域内有一个div这个div能够随着手指的滑动而改变位置,求各位大神指点迷津.. 解决方案 不知道怎么弄了,以前见别人搞过 解决方案二: .............................................好吧 解决方案三: 貌似不是用div吧是用一个浮动窗口然后他的位置属性随手势改变 解决方案四: 这个可以利用touchstart,touchmove,touchend

用360浏览器伪装iPhone触屏版空间

  操作前请注意:本教程经测试仅对于使用chrome内核的360浏览器6.1正式版或更高版本.360浏览器极速版.谷歌浏览器等等有效,其他的双核浏览器可能不适用哟. 正式开始操作: 1)在360浏览器的桌面快捷方式图标上点击鼠标右键,打开属性窗口; 2)然后在"目标"输入框的最后先输入一个空格,后面再继续加上一段参数代码,代码如下: --user-agent="Mozilla/5.0 (iPhone; U; CPU OS 4_2_1 like Mac OS X) AppleW

iPhone问世前安卓还不支持触屏

众所周知,移动操作系统里数iOS和安卓的市场占有率最高,且两者的竞争也是相当激烈.不过,你知道吗?在苹果发布自己的第一台智能手机前,谷歌2006年的安卓计划竟然是物理按键输入,且不支持触屏输入.这是从苹果和三星持续不断的诉讼文档中发现的,早期的规格标准文件中称安卓系统是以独立物理按钮为假设而开发的,不过产品架构里也不存在未来完全不支持触屏的基本原则.文中的配图是谷歌早期SDK的产品渲染图,到那个时候,触屏一体化已经是正式规范的一部分了.据悉,外媒发现在2006年的文档中提及了很多安卓的产品(软件

iPhone问世前安卓并不支持触屏靠物理键输入

[摘要]在苹果发布自己的第一台智能手机前,谷歌2006年的安卓计划竟然是物理按键输入,且不支持触屏输入.iPhone问世前安卓并不支持触屏靠物理键输入腾讯数码讯(编译:夏塔图)众所周知,移动操作系统里数iOS和安卓的市场占有率最高,且两者的竞争也是相当激烈.不过,你知道吗?在苹果发布自己的第一台智能手机前,谷歌2006年的安卓计划竟然是物理按键输入,且不支持触屏输入.这是从苹果和三星持续不断的诉讼文档中发现的,早期的规格标准文件中称"安卓系统是以独立物理按钮为假设而开发的,不过产品架构里也不存在

智能机回归触屏手写?苹果专利Apple Pencil或将支持手机

据相关报道,近日曝光的一项专利文件显示,苹果Apple Pencil将会支持iPhone手机,也就说Apple Pencil的应用范围将会扩大. 苹果的专利主要在技术上阐述一种在触屏上确定手写笔位置的有效方法.不过专利配图很容易看得出来这就是一部iPhone,甚至还标注为移动电话. 之前还有报道称苹果可能会在2019年的iPhone上捆绑一款小号Apple Pencil.随着苹果利用iPhone X成功推广了全面屏设计,苹果已经证明他们有能力在不增加手机尺寸的同时最大化屏幕显示区域. 今年5月,

Bootstrap幻灯轮播如何支持触屏左右滑动手势?

最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢?一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/h

从四个维度探讨触屏手机的网站设计

文章描述:触屏手机网站设计. 随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website.触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备.系统.浏览器.网络.四个维度来与大家共同探讨触屏手机的网站设计: 一.设备 ·分辨率与屏幕尺寸·触屏机的交互特点·性能 1. 分辨率是设计师做网站时首要考虑的问题,iphone/ipod touch目前有2种分辨率:480*32

触屏手机网页产品设计用户体验设计经验分享

文章描述:历时数月,连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发.对触屏手机用户体验设计有了进一步的认识,也颇想分享些心得. 历时数月,连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发.对触屏手机用户体验设计有了进一步的认识,也颇想分享些心得. 上篇包括以下一些内容: >>精神与基础 何谓高端--高端设计精神 平台间平衡 不同分辨率及比例间移植 浏览器框架 >>设计"泛"过程 移动场景下的用户需求 少即是多的设计原则 界面气质 -------

手机WAP触屏站点中TAB菜单的设计及源码【伪网易】

现在手机网页越来越多,我们可以先看下两个地址:"http://3g.ifeng.com/","http://3g.163.com/touch/",我们都会发现有一个共同的特点,就是TAB菜单,对于这种相当传统的特效,我们在之前做过许多,但在手机上,我们会发现它有新的生命力. 如果只是考虑上面的点击,那就是TAB菜单了,只不过这个TAB菜单是全屏切换的,但如果你在手机上体验,会发现,手滑动是可以实现切换,这个手势在手机网页上叫"swipe",触屏技