龙岗公司

    响应式开发常见的陷阱和解决方案

    日期:2016-09-12 人气:453990
    导读: 幻想这么的场景: 您刚刚创建了一个出色的呼应式规划,然后预备在移动设备中测验一下。在您意想不到的当地发生了一些疑问,文字乱糟糟的,动画波涛汹涌,表单没有出现您规划的款式。然后花费N多时刻修正这些疑问,您也许抓狂地把电脑扔出窗外砸中邻居家的猫。 好消息是,我预备在本篇文章里介绍这些也许令您抓狂的疑问,并解说相应的处理方案。首要包含以下五个疑问: 意外的文字改动非希望的表单款式误导

    幻想这么的场景: 您刚刚创建了一个出色的呼应式规划,然后预备在移动设备中测验一下。在您意想不到的当地发生了一些疑问,文字乱糟糟的,动画波涛汹涌,表单没有出现您规划的款式。然后花费N多时刻修正这些疑问,您也许抓狂地把电脑扔出窗外砸中邻居家的猫。


     

    好消息是,我预备在本篇文章里介绍这些也许令您抓狂的疑问,并解说相应的处理方案。首要包含以下五个疑问:


     

    1. 意外的文字改动

    2. 非希望的表单款式

    3. 误导的仿真器过错

    4. 桌面端体现杰出动画的移动端出现疑问

    5. 接触事情(Touch Event)的坐标注册疑问

    1意外的文字改动

    ios设备的旋转将损坏规划、改动页面中的文字大小,当元素(例如导航条、菜单等)设置为固定定位时常常发生相似的疑问,只要改写页面才能够修正疑问。走运的是,有一个办法能够防患于未然。


     

    在您的css中增加如下代码:

    html {
    /* 防止横屏时的文字缩放 */
    -webkit-text-size-adjust: 100%;
    }

    该代码设置横屏时文字的缩放为100%,从而防止意外的文字改动发生。

    2非希望的表单款式

    平板或移动设备常常调用默许款式搞糟您的表单款式,咱们能够运用如下的css代码阻止表单的默许款式。

    input[type=text], button, select, textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0px;
    }

    您能够根据需求挑选重置的表单,例如将input[type=text]改动为input会挑选一切类型的input

    3误导的仿真器过错

    假如您运用根据浏览器的移动仿真器进行测验,有时会发生一些烦人的疑问。在您代码没有疑问的情况下抛出一个疑问,令人纠结。


     

    例如,有一次正在开发中的页面底部的导航条不可思议的消失了,合理我预备查找疑问原因时,我发现Chrome模拟器的视窗底部被切掉一部分,当我在新tab中翻开页面,然后切换移动视图改写之后就处理了疑问。


     

    遇到相似的疑问,最为主要的是,要确保您的代码没疑问仅仅是模拟器的疑问。您能够测验阻隔疑问区域看看代码是不是正常工作,然后在真实的移动设备上测验一下。

    4桌面端体现杰出动画的移动端出现疑问

    假如您在移动设备上运用动画,请一定要特别留意动画的功能疑问。一般来说,浏览器能够有用的动画以下特点translate、scalerotate opacity等,例如下面的案例。

    transform: translate(15px, 40px); /* shift left 15px and down 40px */
    transform: scale(2); /* scale to 2 times original size */
    transform: rotate(30deg); /* rotate 30 degrees */
    opacity: 0.5; /* set opacity at 0.5 */

    这些特点动画功能杰出的原因是,这些特点坐落浏览器渲染器的顶层。您能够把一个页面当作一个餐桌,动画这些特点就相似于移动一个调羹,动画底层特点相似于移动全部餐桌布,您需求一起移动上面的一切覆盖物,所以愈加费力一些(功能就会差一点)。


     

    为了最大化的支撑您的动画,您也许需求加浏览器前缀(verdor prefix)


     

    另外留意,盒暗影(box-shadow)有时会影响动画功能,所以强烈建议运用盒暗影时留意移动设备的测验。

    5接触事情的坐标注册疑问

    接触事情的坐标注册疑问也对比微妙,由于坐标在不一样设备中存储区域不一样。一些设备(例如ios)的接触坐标和单击坐标一样,而另一些(例如android)设备则不一样。好消息是,在任何移动设备中都能够通过特定的接触事情数据(touch event data)获取坐标。


     

    对于接触事情来说,运用e.touches[0].pageX而非e.pageX获取接触点的x坐标,获取y坐标也是相似的道理。下面是一些也许实践使用的代码。

    /* event */
    document.onclick = function(e){
    var x = e.pageX; // get x coordinate of click
    var y = e.pageY; // get y coordinate of click
    console.log('x = ' + x + ', y = ' + y); // show coordinates in console
    }
    /* for touch event */
    document.ontouchstart = function(e){
    var x = e.touches[0].pageX; // get x coordinate of touch
    var y = e.touches[0].pageY; // get y coordinate of touch
    console.log('x = ' + x + ', y = ' + y); // show coordinates in console
    }

    我们无妨模拟器里测验下上面的代码。

    文本来自采集文章 http://qicailight.com/23/28.html 如需转载或删除,请联系管理员。

    1 2 3 4 5 6 7 8 9
    分享到:
龙岗网站建设
【龙岗本地网络公司】——承诺3小时内上门服务!龙岗上门全国热线:400-666-2014 【我要收藏此页面】 网站地图 粤ICP备15108339号 网站维护:深一深圳网站建设
全国龙岗注册公司-服务网店