当前位置:首页 > 教程 > Web前端 > 教程 > 移动web网站开发

移动web网站开发

在我所知道的web开发中,Web技术涉及的内容相当广泛,本书涵盖了其中诸多方面,如:HTML标识语言、Java、Applet、CGI、脚本语言、ASP和JSP技术等。
web
我具体总结了以下几点:

  • width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。
  • -webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios点击元素时出现的阴影。
  • -webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。
  • -webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,会产生很多见所未见的bug。
  • @-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。
  • -webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。
  • 多用text-shadow这个属性,可以美化文字效果, border-radius、box-shadow、gradient、border-image,在移动端都可以很好的支持,使用这些属性可以实现很炫丽的按钮。
  • android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具(iScroll)实现。
  • ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
  • css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。
  • input框会默认呼出,如果想隐藏键盘让其失焦即可。
  • 当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。
  • 使用iScroll的时候,在部分手机(部分小米、三星机型)中click会执行两次,是因为iscroll在判断滑动前,阻止了click事件,然后在滑动后,对原来的click事件进行了重构,在一些设备上并没有将默认的click阻止掉。所以,出现了类似双击的现象。
  • 解决方案:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    
    //1.自己写一个fn-->myclick,然后onclick="myclick();"调用。
    var t1 = null;//这个设置为全局
    function myclick(){
        if (t1 == null){
            t1 = new Date().getTime();
        }else{      
            var t2 = new Date().getTime();
            if(t2 - t1 < 500){
                t1 = t2;
                return;
            }else{
                t1 = t2;
            }
        }
        /*自己的代码*/
    }
     
    //2.上面的代码,也可以写在iscroll.js(4.2.5)的_end方法中,要注意var t1是全局的
    //3.国外论坛在iscroll.js(4.2.5)对应位置添加
    topOffset: 0,
    checkDOMChanges: false,   // Experimental
    handleClick: true,
    preventGhostClick: false, // prevent ghost clicks?防止2次点击
    ghostClickTimeout: 500,   // timeout for ghost click prevention设置时间差
     
    /**
    * Prevents any real clicks.
    * See preventGhostClick portion of _end().
    */
    _preventRealClick: function(e) {
        if (e._fake !== true) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            e.cancel = true;
            return false;
        }
    },
    _end: function (e) {......
     
    ev._fake = true;
    if (that.options.preventGhostClick) { //preventGhostClick: true,
        // prevent ghost real clicks on body
        document.body.addEventListener('click', that._preventRealClick, true);
        // until ghost click timeout expires
        setTimeout(function () {
                  document.body.removeEventListener('click', that._preventRealClick, true);
        }, that.options.ghostClickTimeout);
    }
    target.dispatchEvent(ev);
     
    //4.使用zepto的tap替换click

    web

  • iOS中禁止用户保存图片、复制图片,img标签指定-webkit-touch-callout为none可以禁止设备弹出列表按钮,这样用户就无法保存/复制你的图片。
  • 使用-webkit-user-select: none; 禁止用户进行复制, 选择。

总结

随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。

  • << JSON与OC互相转换
  • iOS开发-应用跳转及通信 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/mobile-web/

    相关文章 近期热评 最新文章

    • HTML+CSS+JS 实现图标旋转效果
      本文讲解了使用HTML+CSS+JS 实现图标旋转效果。
    • js怎样获取和设置元素的属性
      本文讲解了js获取和设置元素的属性的方法,有需要的朋友可以看看
    • Node.Js 不一般的JavaScript
      互联网的火热使得JavaScript风光无限,且服务端的JavaScript也并不是什么新技术了,相关的框架也有不少,只是node.js的成功让他爆发式的出现在我们的视线中,让很多前端...
    • 前端程序员必须知道的优化小知识
      前端开发人员的一些小知识,Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术。除了后台需要在性能上做优化外,其实前端的页面...
    • HTML5与CSS3的完美搭配
      TML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。
    • 前端程序员必须知道的chrome开发者技巧
      在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程