您的位置: 首页  >  IT文章  >  【html5移动web开发】关于移动端开发

【html5移动web开发】关于移动端开发

分类: IT文章 • 2022-04-23 19:09:41

1.Google Analytics分析工具的使用：注册后页面中加入Google Analytics的代码，可以分析出有哪些设备在访问网站或者哪些页面访问量比较大、

2.Modernizr 可以检测浏览器对html5元素的支持性。可以判断是否支持localstorage等等

3.html5元素在旧版本的IE浏览器下显示为块级元素   article,aside,nav,section{ display:block;}

4.PC端采用固定布局与流体布局，而在移动网站中我们始终使用流体布局，它可以使你的网站适应不同的设备尺寸。  

　比如：竖屏下显示一列，横屏下显示2列（合理利用每个像素）

5.清除html5元素的默认样式

　article,aside,section……{ margin:0; padding:0;border:0;font-size:100%;font:inherit; vertical-align:baseline;}

6.页面重置字体大小：-webkit-text-size-adjust:none;

　　　　　　　　　-webkit-text-size-adjust:none;如果在Pc桌面访问，或者通过其他的非移动设备的浏览器访问，会导致页面的缩放功能会被禁用。

　　　　　　　　　IPhone:  html{-webkit-text-size-adjust:100%;} 

　　　　　　　　　微软  html{-ms-text-size-adjust:100%;}

7.媒介查询（media query）

　@media screen and (min-320px){   }

8.同一个局域网下，可以使用XAMPP配置移动开发环境（本地网站服务），确认电脑和移动设备是在同一无线网络中。通过IP地址即可以访问

9.如果你的主要用户使用iphone和移动版safari,在桌面电脑上测试可以节约很多时间。打开safari,偏好设置---高级栏---开发---用户代理---Mobile safari 3.1.3-IPhone

10.通过界面图标启动web应用

　  Retina屏幕采用114*114的图标

　　<link rel='apple-touch-icon-precomposed' sizes='114*114' href='apple-touch-icon-114*114-precomposed.png'>

     ipad使用72*72的图标

　　未使用Retina屏幕的的IPhone和Android 2.1以上版本的设备，使用57*57的图标

　  对于诺基亚塞班的设备，一个快捷键图标只是用来告诉移动设备这个图标的位置。

　　<link rel='shortcut icon' href='img/1/apple-touch-icon.png'>

 11.（文字过小，不易读），为了让手机能获得更好的网页浏览体验，引入了viewport meta标签，它的作用就是创建一个虚拟视口，而这个虚拟窗口的分辨率接近于桌面显示器，Apple将其默认为980px,（如果不设置视口，它将会按照980像素的宽度渲染页面）

      <meta name ='viewport' content='width=device-width'>

12.有些古老的移动设备浏览器不能识别viewport属性，对于这些浏览器，使用如下的代码：

　　<meta name='HandheldFriendly' content='true'>   //PalmOS、AvantGo和黑莓设备

     对于微软的PocketPC  <meta name='MobileOptimized' content='320'>

13.IOS设备  移动版Safari有个烦人的问题就是：当你从竖屏模式切换到横屏模式的时候，浏览器上的文本字体会突然变大。（IOS7.2测试没这个问题）

     怎么解决此问题呢 <meta name='viewport' content='width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0 '

     但是会造成无法缩放，眼睛不好文字无法放大造成不易阅读的状况，所以就采用监听手势事件，当手势开始的时候就viewport设为默认值  默认最大放大1.6，最小为0.25

    //检测所有的meta,设置它的viewport属性，最大为1.6，最小为原大小的0.25  ，iphone自带的gesturestart事件  bug:有时候第一次不起效果，第二次才能正常工作ios4

<script>
    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";
        }
    }
            }
        </script>

 13.手机启动google map地图，只需要<a href='http://maps.google.com/maps?q=cupertino'>添加地图，可以设置参数以便选择出发地和目的地

14.iphone下全屏模式启动，把该页添加为标签，然后通过界面图标启动(web应用)

    <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/1/splash.png'>   在程序启动、加载的时候，显示一个预加载的界面，告诉用户该程序正在加载

   IPhone和ipad因为屏幕大小的差异，因此需要不同大小的预加载界面

    var filename = navigator.platform === 'ipad' ?  'h/' :  'i/';

　 document.write('<link rel="apple-touch-startup-image" href="/img/'+filename +'splash.png"/>');

15.表单在ios聚焦时会出现放大。如何禁用放大的功能

    //输入框onfocus的时候viewport的属性  maximum-scale=1  ,blur失去焦点的时候maximum-scale=10  

<script>
    var $viewportMeta = $('meta[name="viewport"]');
    $('input,select,textarea').bind('focus blur',function(event){
        $viewportMeta.attr('content','width=device-width,initial-scale=1,maximum-scale=' + (event.type=='blur'? 10:1) );
    }
</script>

16.如何禁用或者限制部分Webkit特性，比如说<a>链接点击的时候会出现提示是“打开链接  还是  复制     还是新的页打开 ”  

     解决办法：.nocallout {-webkit-touch-callout: none;} 

    如何在内容溢出的时候显示省略号   //禁止换行，超出内容隐藏显示省略号   white-space:nowrap;overflow:hidden;text-overflow:ellipsis

　 如何限制复制粘贴功能 -webkit-user-select:text

　如何修改点击之后的背景颜色  -webkit-tap-highlight-color:rgba(0,0,0,0);

   如何让文本内容可编辑   contenteditable=true

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <style>
   html {color:#ff9;}
  .a{ white-space: nowrap; overflow: hidden; text-overflow:ellipsis; -webkit-user-select:text;}//内容出现省略号
  .nocallout {-webkit-touch-callout: none;} 
  #targetarea {200px; height:120px; padding-top:80px; background:#ccc; text-align:center; font-size:20px;}
  </style>
  </head>
  <body>
    <header >
       
    </header>
    <div > contenteditable=true>
      <a class="nocallout" href="http://www.google.com" target="_blank">Google</a>
    </div>
    <footer>
    </footer>
  </body>
</html>

17.移动端交互：

     1）利用触控来移动页面元素  

     2）横竖屏切换事件

     3）利用手势来旋转页面元素

     4）利用滑动来创建图库

     5）利用手势来缩放页面元素

 //移动页面元素，移动版safari不允许event对象的touches和changedTouches属性被拷贝给其他对象，我们可以使用event.originalEvent来解决这个问题

   （灰色部分是想让拖动点就在它的中心点上，自己测试所得。灰色前面部分是书上所写） 

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

 //横竖屏切换事件 （有时你需要禁止横竖屏的自动切换，比如开发游戏。对于原生应用这很容易，但对于网页应用非常困难。）

        <script>
            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";
                    }
                }
            }
        </script>
    
        <script>
      $(window).bind('orientationchange',function(event){
        updateOrientation(event.orientation);//横屏时文字变为“LANDSCAPE”模式  ，竖屏时文字变为“PORTAIT”
      })
            function updateOrientation(orientation) {
        $("#a").html("<p>"+orientation.toUpperCase()+"</p>");
            }
        </script>

  //横竖屏切换小示例，竖屏下文字旋转90度，横屏下正常（竖屏下旋转90度其实就是想提示用户要横屏操作）

<!doctype html>
<html>
    <head>
        <title>Mobile Cookbook</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <link  href="http://fonts.googleapis.com/css?family=Kranky:regular" rel="stylesheet" type="text/css" >
        <style>
        body {
            font-family: 'Kranky', serif;
            font-size: 36px;
            font-style: normal;
            font-weight: 400;
            text-shadow: none;
            text-decoration: none;
            text-transform: none;
            letter-spacing: 0em;
            word-spacing: 0em;
            line-height: 1.2;
        }
        </style>
    </head>
    <body>
        <div >
            <div >enter the game</div>
        </div>
        <script>
            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";
                    }
                }
            }
            window.onorientationchange = function() {
                update();
            }
            function update() {
                switch(window.orientation) {
                    case 0:   // Portrait
                    case 180: // Upside-down Portrait
                        var cWidth = window.innerWidth;
                        var cHeight = window.innerHeight;
                        document.getElementById("screen").style.width = cHeight-36+'px';
                        document.getElementById("screen").style.height = cWidth+'px';
                        break;
                    case -90: // Landscape: turned 90 degrees counter-clockwise
                    case 90:  // Landscape: turned 90 degrees clockwise
                        var cWidth = window.innerWidth;
                        var cHeight = window.innerHeight;
                        document.getElementById("screen").style.width = "100%";
                        document.getElementById("screen").style.height = "auto";
                        break;
                }
            }
            update();
        </script>
        <script>
            
        </script>
    </body>
</html>
View Code

// 利用手势来旋转页面元素(iphone5测试没通过) ---监听ongesturechange事件，再利用css3 transform:rotate(0deg)原理

<script>
    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;
    }
    </script>

//利用滑动来创建图库，主要是用的jquery mobile的swipeleft,swiperight事件

<!doctype html>
<html>
  <head>
        <title>Mobile Cookbook</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            html, body {
                padding:0;
                margin:10px auto;
            }
            #checkbox {
                border:5px solid #ccc; 
                width:30px; 
                height:30px;
            }
            #wrapper {
                width:210px;
                height:100px;
                position:relative;
                overflow:hidden;
                margin:0 auto;
            }
            #inner {
                position:absolute;
                width:630px;
            }
            #inner div {
                width:200px;
                height:100px;
                margin:0 5px;
                background:#ccc;
                float:left;
            }
            .full-circle {
                 background-color: #ccc;
                 height: 10px;
                 -moz-border-radius:5px;
                 -webkit-border-radius: 5px;
                 width: 10px;
                 float:left;
                 margin:5px;
            }
            .cur {
                background-color: #555;
            }
            #btns {
                width:60px;
                margin:0 auto;
            }
        </style>
  </head>
  <body>
    <header>
    </header>
        <div id="main">
            <div id="wrapper">
                <div id="inner">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div id="btns">
                <div class="full-circle cur"></div>
                <div class="full-circle"></div>
                <div class="full-circle"></div>
            </div>
        </div>
    <footer>
    </footer>
        <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
        <script>
        var curNum = 0;
        $('#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');
            });
        });
        
        $('#wrapper').swiperight(function () {
            $('#inner').animate({
            left: '+=210'
            }, 500, function() {
                // Animation complete.
                curNum -=1;
                $('.full-circle').removeClass('cur');
                $('.full-circle').eq(curNum).addClass('cur');    
            });
        });
        </script>
    </body>
</html>
View Code

//利用手势操作图片缩放---当缩放手势触发，我们可以获取缩放的信息，并且基于此放大或缩小页面元素  event.scale

<script>
var width = 100, height = 100;
var node = document.getElementById('frame');
node.ongesturechange = function(e){
    var node = e.target;
    node.style.width = (width * e.scale) + "px";
    node.style.height = (height * e.scale) + "px";
    alert(node.style.width);
}
node.ongestureend = function(e){
    width *= e.scale;
    height *= e.scale;
}
</script>

延伸：

两指多点触摸，事件的触发顺序如下：（最好的例子：google map 、百度地图）

1 手指1的touchstart:当手指触摸到屏幕时触发
2 手指2的touchstart：当手指触摸到屏幕时触发
3 gesturestart:当第二个手指触摸屏幕时触发
4 gesturechange:当两个手指保持触摸并开始移动时触发
5 手指1的touchend:当第一根手指离开屏幕时触发
6 手指2的touchend:当第二根手指离开屏幕时触发，紧接着gestureend触发
7 gestureend:当第二根手指离开屏幕时触发

　　

　　

相关推荐