iPhone上的Web前端开发3.ppt
2023/3/4,iPhone上的Web前端开发,云谦,2023/3/4,本次分享的主要内容,一、了解iPhone web app二、CSS三、JavaScript四、Resource,2023/3/4,一、了解iPhone web app,2023/3/4,2023/3/4,2023/3/4,2023/3/4,2023/3/4,2023/3/4,Viewport(视窗),320*356(竖版)480*208(横版)隐藏“地址栏”的情况下320*416(竖)480*268(横)键盘、表单辅助栏默认宽度是 980px用meta标签指定 viewport 设置常量device-widthdevice-height更详细的介绍http:/design.alibaba-,2023/3/4,开发之前还有一些要知道的,用户是可以设置浏览器属性的JavaScript可能被关掉弹窗默认被禁止iPhone内置了一个调试控制台资源的限制和脚本的限制每个静态资源(*.html,*.js,*.css)10M超过25K的静态资源不会被缓存(gzip前)5秒钟的JavaScript执行时间更多http:/PDF,Word,Text,QT,Canvas 不支持：Java,Flash,SVG,2023/3/4,开发之前还有一些要知道的,不支持的技术模态窗口-window.showModalDialog()Mouseover 事件Hover 样式不要使用frameset不同版本的iPhone,Safari版本不一样iPhone 1.1.x 对应 Safari 3.0iPhone 1.2.x 对应 Safari 3.1.1,2023/3/4,Html结构上的区别,声明viewport的meta标签，和指定桌面icon的link标签,2023/3/4,原生的字体,http:/,2023/3/4,https:/,2023/3/4,2023/3/4,二、CSS,2023/3/4,不支持的属性和选择符,:nth-childposition:fixed-webkit-border-fit-webkit-column(s-*)-webkit-box(-shadow,-sizing)2.0 supported-webkit-text(-stroke,-stroke-color,-stroke-width)2.0 supported-webkit-text-fill-color 2.0 supported,iPhone CSS Test：http:/,2023/3/4,-webkit-text-size-adjust,设置页面上的文本尺寸,控制页面上的文本尺寸默认为auto建议直接设为 none,2023/3/4,-webkit-tap-highlight-color,设置手指触发链接时的颜色,2023/3/4,CSS Animate(需 iPhone OS 2.0),Basic,设置-webkit-transition-property 和-webkit-transition-durationmultiple例子,2023/3/4,CSS Animate(需 iPhone OS 2.0),Animatable CSS Properties,Leftrighttopbottomwidthheightborder-left-width border-right-widthborder-top-widthborder-bottom-widthmargin-leftmargin-rightmargin-topmargin-bottompadding-leftpadding-rightpadding-toppadding-bottomcolorbackground-color-webkit-column-rule-color-webkit-column-rule-width-webkit-column-gap-webkit-column-count-webkit-column-widthtext-stroke-colortext-fill-color-webkit-border-horizontal-spacing-webkit-border-vertical-spacingborder-left-colorborder-right-colorborder-top-colorborder-bottom-colorz-indexline-heightoutline-coloroutline-offsetoutline-widthletter-spacingword-spacing-webkit-box-shadowtext-shadow-webkit-border-left-radius-webkit-border-right-radius-webkit-border-top-radius-webkit-border-bottom-radiusvisibility-webkit-transform-origin-x-webkit-transform-origin-y-webkit-transform-origin-z-webkit-transform opacity,2023/3/4,CSS Animate(需 iPhone OS 2.0),CSS Transition Properties,-webkit-transition-property-webkit-transition-duration-webkit-transition-timing-function-webkit-transition-delay-webkit-transition 简写属性例：-webkit-transition:opacity 500ms ease-in 100ms,newin iPhoneSafari,2023/3/4,CSS Animate(需 iPhone OS 2.0),Resource,Safari CSS Animation Guide for iPhone OSSafari CSS Transform Guide for iPhone OS,2023/3/4,其他 CSS 技巧介绍,-webkit-appearance:none;取消默认样式text-overflow:ellipsis;需配合 white-space:nowrap 使用，仅支持单行text-shadow:#666 0-1px 0;最后一个参数是高斯模糊的半径，0即不作处理-webkit-border-radius:10px;圆角,2023/3/4,2023/3/4,2023/3/4,其他 CSS 技巧介绍,background:url(.),url(.),url(.),url(.)多重背景color:rgba(255,255,255,0.7);定义透明的颜色，上例表示70%的白色,2023/3/4,其他 CSS 技巧介绍,border-width:0 14px 0 14px;-webkit-border-image:url(image.png)0 14 0 14;创建按钮的时候很有用。,2023/3/4,2023/3/4,三、JavaScript,2023/3/4,屏幕旋转事件,事件：window.onorientationchange值：window.orientation通常：HTML CSS bodyorient=“landscape”btn,2023/3/4,隐藏地址栏,addEventListener(load,function()setTimeout(function()window.scrollTo(0,1);,100););,iPhone OS的全屏实现方法：(apple doc,demo),2023/3/4,单指事件,手势一：滑动,2023/3/4,单指事件,手势二：按住并保持,2023/3/4,单指事件,手势三：双击,2023/3/4,单指事件,手势四：模拟鼠标动作,2023/3/4,双指事件,手势一：放大/收缩,2023/3/4,双指事件,手势二：双指同时滑动,2023/3/4,多点触摸(需iPhone OS 2.0),单指：touchstart,touchmove,touchend,touchcancelevent.touches双指：gesturestart,gesturechange,gestureendevent.rotation,event.scale“支持的事件”详细列表：Safari Web Content for iPhone OS 第 72 页,2023/3/4,欠缺/Bugs,window.onresize 无效window.pageYOffset 一直是0手指按下不会触发mousedown事件，手指抬起不会触发mouseup访问图片会以默认viewport显示,2023/3/4,2023/3/4,四、Resource,2023/3/4,苹果官方(Web Apps Dev Center，Web Apps Library)iPhoneWebDevGoogle iPhone dev groupTestiP Free Web Browser Based iPhone SimulatorIUI iPhone UI library(介绍,digg for iPhone)iPhone Interface SamplesiPhone Compatible CSS layoutsIBM DeveloperWorks Develop iPhone Web applications with Eclipse,2023/3/4,iPhone GUI PSD File35 Free iPhone Icon Sets,2023/3/4,2023/3/4,谢谢大家！,
