《HTML5移动web开发实战》记录（一）

一、HTML5与移动网络

1、哪些平台和浏览器是流行的

2、哪些浏览器可以支持现代脚本

3、哪些设备和模拟器需要我进行测试

 

二、移动端的配置和优化

1、不同分辨率显示不同尺寸

2、避免文字大小

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; 

3、优化浏览器窗口

<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="true"> PalmOS、AvantGo、黑莓
<meta name="MobileOptimized" content="320"> 微软

4、修复safari re-flow scale

            var metas = document.getElementsByTagName('meta');
            var i;
            if (navigator.userAgent.match(/iPhone/i)) {
                for (i=0; i<metas.length; i++) {
                    if (metas[i].name == "viewport") {
                        metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
                    }
                }
                document.addEventListener("gesturestart", gestureStart, false);
            }
            function gestureStart() {
                for (i=0; i<metas.length; i++) {
                    if (metas[i].name == "viewport") {
                        metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
                    }
                }
            }

5、在浏览器中启动浏览器原生应用

<a href="http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>

6、iphone全屏模式启动

<meta name="apple-mobile-web-app-capable" content="yes">
web应用从界面图标启动时候，以全屏模式启动，隐藏工具类，地址栏和加载状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="black">
顶部显示一个状态栏
<link rel="apple-touch-startup-image" href="img/l/splash.png">
显示一个预加载的界面

7、防止IOS在聚焦时自动缩放

　　google模拟器中没试出来

8、禁用或限制webkit特性

　　google模拟器中没试出来

 

三、移动设备的交互方式

1、移动页面元素

　　google模拟器中没点出来

$('#someElm').bind('touchmove',function(e){
    e.preventDefault();
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        var elm = $(this).offset();
        var x = touch.pageX - elm.left/2;
        var y = touch.pageY - elm.top/2;
        $(this).css('left', x+'px');
        $(this).css('top', y+'px');
        console.log(touch.pageY+' '+touch.pageX);  
    });

2、检测和处理横屏切换事件

window.onorientationchange = function() {
     update();
}

3、利用手势旋转页面元素

　　var rotation =0 ;
    var node = document.getElementById('someElm');
    
    node.ongesturechange = function(e){
      
      var node = e.target;
      //alert(e.rotation);
      // scale and rotation are relative values,
      // so we wait to change our variables until the gesture ends
      node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
      //alert("rotate(" + ((rotation + e.rotation) % 360) + "deg)");
    }
     
    node.ongestureend = function(e){
      // Update the values for the next time a gesture happens
      rotation = (rotation + e.rotation) % 360;
    }

4、利用滑动创建图库

　　　　$('#wrapper').swipeleft(function () {
      　　　　//alert('hi');
            $('#inner').animate({
            left: '-=210'
            }, 500, function() {
                // Animation complete.
                curNum +=1;
                $('.full-circle').removeClass('cur');
                $('.full-circle').eq(curNum).addClass('cur');
            });
        });

5、利用手势操纵图片缩放

　　　　 var width = 100, height = 100;
        var node = document.getElementById('frame');
        node.ongesturechange = function(e){
            var node = e.target;
            // scale and rotation are relative values,
            // so we wait to change our variables until the gesture ends
            node.style.width = (width * e.scale) + "px";
            node.style.height = (height * e.scale) + "px";
        }
        node.ongestureend = function(e){
            // Update the values for the next time a gesture happens
            width *= e.scale;
            height *= e.scale;
        }

 

四、构建快速响应式移动互联网站点

1、使用HTML5语法构建页面

　　<header>标签内还会使用title，subtitle或者tagline标签

　　<nav><footer>

　　点击查看HTML5 标签列表

2、使用CSS3特性做渐进增强

header {
      text-shadow: 0 1px #000;
      background: #ff3019; /* Old browsers */
      background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 20%, #ff3019 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(20%,#cf0404), color-stop(100%,#ff3019)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* W3C */
    }

3、响应式设计

@media only screen and (min-width: 800px) {

}

4、优化polyfills脚本的加载速度

　　  yepnope({
        test : Modernizr.geolocation,
        nope : ['js/geolocation.js'],
        complete: function () {
          navigator.geolocation.getCurrentPosition(function(position) {
            document.getElementById('geo').innerHTML = position.coords.latitude+", "+position.coords.longitude;
          });
        }
      });

5、检测客户端

6、使用书签气泡为应用添加桌面快捷方式

7、可自动收缩的文本框

　　使用mobile boilerplate的help.js

　　　 var contact = document.getElementById("contact");
      alert('hi');
      MBP.autogrow(contact);

8、加速按钮反馈

　　  var btn = document.getElementById("btn");
      MBP.fastButton(btn,showForm);
      function showForm() {
        $("#result").html("Thank you for submiting, we will get back to you shortly!");
      }

9、隐藏浏览器的地址栏

10、构建站点地图

 

 

书籍和源码下载：

http://download.csdn.net/detail/loneleaf1/8318707