美文网首页
移动端开发注意事项

移动端开发注意事项

作者: zkzhengmeng | 来源:发表于2019-03-29 09:29 被阅读0次

    开发工具:Visual Studio Code及相关插件安装

    Easy LESS 当保存.less文件时自动生成.css文件

    Less IntelliSense .less文件的自动提示功能

    Beautify css/sass/scss/less 样式文件格式化功能

    Live HTML Previewer html预览功能

    HTML Snippets html标签自动完成功能

    JS-CSS-HTML Formatter html格式化功能

    <!DOCTYPE html>

    <html manifest="test.manifest">

    <!--

    CACHE MANIFEST

    #我是注释,这个文件名叫test.manifest

    CACHE:

    /test.css

    /test.js

    -->

        <head>

            <meta charset="utf-8"/>

            //自动适屏

            <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

            //禁止 iOS 识别长串数字为电话

            <meta name="format-detection" content="telephone=no" />

            <!--<a href="tel:4008106999,1034">400-810-6999 转 1034</a>-->

            <!--<a href="sms:139xxxxxxx">一键发送短信</a>-->

            //不让安卓手机识别邮箱

            <meta name="format-detection" content="email=no" />

            <!--<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>-->

            //地址识别

            <meta name="format-detection" content="adress=no" />

            <!--苹果safari特有属性-->

            //全屏模式

            <meta name="apple-mobile-web-app-capable" content="yes" />

            //顶部状态栏背景色

            <meta name="apple-mobile-web-app-status-bar-style" content="black" />

            //设置缓存

            <meta http-equiv="Cache-Control" content="no-cache" />

            //图标

            <link rel="apple-touch-icon" href="touch-icon-iphone.png" />

            <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />

            <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />

            <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

            <!--QQ浏览器特有属性-->

            //全屏模式

            <meta name="x5-fullscreen" content="true"/>

            //强制竖屏

            <meta name="x5-orientation" content="portrait"/>

            //强制横屏

            <meta name="x5-orientation" content="landscape"/>

            //应用模式

            <meta name="x5-page-mode" content="app"/>

            <!--UC浏览器特有属性-->

            //全屏模式

            <meta name="full-screen" content="yes"/>

            //强制竖屏

            <meta name="screen-orientation" content="portrait"/>

            //强制横屏

            <meta name="screen-orientation" content="landscape"/>

            //应用模式

            <meta name="browsermode" content="application"/>

        </head>

        <body>

        </body>

    </html>

    常用布局方式:

            1.流式布局+百分比    float:left , float:right  center:100%;

            一般手机端布局分为上(header)中(center)h和下(footer)三部分

            常见布局:

                      header部分height:45px;width:100%;

                      position:fixed;

                      top:0;

                      left:0;

                        center部分:position:fixed

                        top:45px;

                        bottom:45px

                        footer部分:

                        bottom:0;

                        left:0;

            2.弹性盒布局  display:flex;

              任何一个容器都可以指定为Flex布局。

                      .box{display: flex;}

                  行内元素也可以使用Flex布局。

                  .box{ display: inline-flex;}

                  Webkit内核的浏览器,必须加上-webkit前缀。

                .box{  display: -webkit-flex; /* Safari */

                display: flex;}

          注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

            3.rem 布局    font-size:1rem;

        (function (doc, win) {

                var docEl = doc.documentElement,

                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

                recalc = function () {

                    var clientWidth = docEl.clientWidth;

                    if (!clientWidth) return;

                    if(clientWidth>=640){

                        docEl.style.fontSize = '100px';

                    }else{

                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

                    }

                };

                  if (!doc.addEventListener) return;

                win.addEventListener(resizeEvt, recalc, false);

                doc.addEventListener('DOMContentLoaded', recalc, false);

              })(document, window);

      这是rem布局的核心代码,

      这段代码的大意是:如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)

      于是,问题来了,为什么要这样?别急,我先来一一回答

      1. 为什么是640px?

            对于手机屏幕来说,640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。

            如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的CSS逻辑像素数为320 x 568px。

            如果要切移动端页面,你可以先把效果图宽度等比例缩放到640px,很好用。

      2. 为什么要设置html的font-size?

            rem就是根元素(即:html)的字体大小。html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大胆的用rem作单位。

            如果你把html的font-size设为20px,前面说过,rem就是html的字体大小,那么1rem = 20px。此时,此时宽60px,高40px的元素样式就这样设置如下 ↓

      3. width: 3rem;  height: 2rem;

      那要是宽55px,高37px呢?然后经过换算,,设置如下 ↓

      width: 2.75rem;

      height: 1.85rem;

      是不是发现这换算起来有点麻烦啊,,,(当然,你要是心算帝请无视)

      如果我们一开始把html的font-size设为100px呢?此时1rem = 100px,那么上面的宽55px,高37px的元素样式就可以这么设置 ↓

      width: 0.55rem;

      height: 0.37rem;

      是不是换算起来简单多了?!

      4.百分比布局  width:50%;

        百分比布局就是在项目中所有元素的宽高都不设置固定大小,而是用百分比来控制其大小

        div{width:25%;heigt:20%;}

      美工出图原则:

      分辨率宽度:

                320  480  640  960  1280 1600 1920 (web分辨率均为320[320*480])

                360  720  1080 1440 1800 (web分辨率均为360[360*640])

      因此有两套思路:

      第一种是制作1920的psd图,然后导出320的jpg或bmp图。

      其中的1920是320的6倍,然后高度,宽度百分比均从320上切取。

      新建文档时1920*2880=(320*6)*(480*6);单位像素。

      分辨率为432=(72*6);单位像素/英寸;

      颜色模式:RGB颜色;

      alt+ctrl+i 可调整图像大小及分辨率

      第二种是制作1440的psd图,然后导出360的图。

      其中1440是360的4倍,然后图片均从360上切取。

      新建文档时1440是360的4倍,,然后高度,宽度百分比均从360上切取。

      分辨率为288=(72*4);单位像素/英寸;

      颜色模式:RGB颜色;

      alt+ctrl+i 可调整图像大小及分辨率

      第三种是制作宽度为320的图,并让其居中。所有的图片,大小,均按固定的来。

      这样做的好处是兼容性强,且对前端的要求不高。

    不过坏处是在某些分辨率下虽然布局不会乱,但看上去效果可能不太理想。

      一般美工设计原则如下:

    1.字体一般使用10px到16px,字体大小偶数,特殊情况下需要特小字体的也可选用8px字体。

    因为在480px及720px屏上实际显示的字体大小为16px,并不会出现字体显示不清晰的问题;

    2.颜色一般选择

    对于黑白色,做为字体色及边框色时,仅能选择如下几种:

    #ffffff;

    #cccccc;

    #999999;

    #666666;

    #333333;

    #000000;

    因为字体和边框只能使用web色,而web色仅有216种,其中以上6种为非彩色。

    其它地方均可以采用真彩色(8+8+8=24位),即2的24次方,1677万种颜色。

    因此在设计某些颜色时,如果背景和某种字体颜色相同,但显示出的颜色却不一样。

    是因为psd中字体的真彩色转换为html时被浏览器转换成了颜色值较少的web色。

    3.尽量不要使用过渡色,使用平面设计

    因为大量的过渡色,非常消耗手机的cpu,只有3d效果浏览器会用gpu(显卡)渲染。

    也就是说,只所以手机采用平面化设计是因为手机性能的原因。

    4.关于优化:

    a.联通3g下载速度为338kb/s,因此一个UI图中所有图片的大小不能超过1mb.因此图片宽度不要超过640px

    b.css3>svg>iconfont>webp>png8>gif>jpg

    c.合并小图片,把固定大小的图标放入单一png中。

    d.不要使用除微软件雅黑之外的非图片字体。

    //盒子模型

    ┌────────────────────────────────────────────────┐

    │    margin            15px                      │

    │    ┌──────────────────────────────────────┐    │

    │    │    border      1px                  │    │

    │    │    ┌────────────────────────────┐    │    │

    │    │    │  padding  4px            │    │    │

    │    │    │  ┌────────────────────┐  │    │    │

    │10px│ 1px│4px│    200px*40px    │4px│ 1px│10px│

    │    │    │  └────────────────────┘  │    │    │

    │    │    │            4px;            │    │    │

    │    │    └────────────────────────────┘    │    │

    │    │                1px                  │    │

    │    └──────────────────────────────────────┘    │

    │                      15px                      │

    └────────────────────────────────────────────────┘

    width:200px+4px*2+1px*2=200px+8px+2px=210px;

    height:40px+4px*2+1px*2=40px+8px+2px=50px;

    margin-top:15px;

    margin-left:10/360*100%;

    padding-left:4/360*100%;

    border:1px;

    width:210/360*100%;

    光标bug:

    input

    height:20px;

    padding-top:4px;

    padding-bottom:4px;

    font-size:12px;

    height = padding-top + font-size + padding-bottom;

    此时光标在任意浏览器下高度与字体高度相同

    ┌────────────────────────────┐0

    │    padding-top:4px;      │

    │ 4 ┌────────────────────┐ 4 │4

    │ p │    height:12px    │ p │

    │ x └────────────────────┘ x │16

    │  padding-bottom:4px;      │

    └────────────────────────────┘20

    其它细节重置:

    letter-spacing: 0;

    word-spacing: 0;

    text-indent: 0;

    text-shadow: none;

    1.水平按百分比计算

    2.垂直按像素计算

    div

    ┌────────────────────────────┐0

    │    padding-top:4px;      │

    │ 4 ┌────────────┐┌──────┐ 4 │4

    │ p │    div1    ││ div2 │ p │

    │ x └────────────┘└──────┘ x │16

    │  padding-bottom:4px;      │

    └────────────────────────────┘20

    0  4    div1    66 div2 96 100

    div

    {

        width:100%;

        height:20px;

        padding-left:4/100*100%;

        padding-right:4/100*100%;

        padding-top:4px;

        padding-bottom:4px;

    }

    div1{

        width:(66-44)/100*100%;

        height:20px;

    }

    div2

    {

        width:(96-66)/100*100%;

        height:20px;

    }

    整体间距:10px,15px,20px

    ┌────────────────────────────┐0

    │    padding-top:15px;      │

    │10 ┌────────────┐┌──────┐10 │4

    │ p │    div1    ││ div2 │ p │

    │ x └────────────┘└──────┘ x │16

    │  padding-bottom:15px;    │

    └────────────────────────────┘20

    整体内容边距

    10px 2.7777%

    字体padding

    6px 1.6666%

    10px 2.7777%

    12px 3.3333%

    15px 4.1666%

    16px 4.4444%

    20px 5.5555%

    28px 7.7777%

    30px 8.3333%

    40px 1.1111%

    60px 16.6666%

    300px 83.3333%

    320px 88.8888%

    less下颜色命名:(web色)

    @color-样式名-颜色名:颜色值;

    @color-background:#f5f5f5;

    @color-border: #cccccc;

    @color-font-blue:#0099cc;

    @color-font-black:#1b1b1b;

    @color-font-gray-light:#999999;

    @color-font-gray:#999999;

    @color-font-orange:#ff9900;

    常用边距:

    //margin-组件名-位置

    @margin-panel-top;

    @margin-card-top;

    @margin-list-top;

    //组件名:panel,view,card,list

    //方向,left,right,top,bottom

    @padding-text-left;

    //horizontal:水平

    @padding-text-horizontal;

    //垂直

    @padding-text-vertical;

    背景图大小

    340*200

    小图:386积分

    70*30

    标题高度:40px

    小框:查看更多

    80*25

    图片大小

    132*132

    340*200

    1.样式文件,防止加载编码出错。

    @charset "UTF-8";

    /* 移动端定义字体的代码 */

    body{font-family:Helvetica;}

    //竖屏时使用的样式

    @media all and (orientation:portrait) {

    .css{}

    }

    //横屏时使用的样式

    @media all and (orientation:landscape) {

    .css{}

    }

    //禁止文本缩放,当仅采用竖屏时才会遇到字体分辨率重新调整的问题。

    html {

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

    }

    动画效果中,使用 translate 比使用定位性能高

    //滚动中加入以下样式。

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

    //更改输入框placeholder的颜色

    input::input-placeholder{color:#1b9dc7;}

    input::-webkit-input-placeholder{color:#1b9dc7;}

    input::-o-input-placeholder{color:#1b9dc7;}      设置input里placeholder的字体颜色 属性

    input::-ms-input-placeholder{color:#1b9dc7;}

    input::-moz-input-placeholder{color:#1b9dc7;}

    //关闭iOS键盘首字母自动大写

    <input type="text" autocapitalize="off" />

    //去掉数字输入框的上下箭头

    input[type=number] {-moz-appearance:textfield; }

    input[type=number]::-webkit-inner-spin-button,

    input[type=number]::-webkit-outer-spin-button

    {-webkit-appearance: none;  margin: 0; }

    //android 上去掉语音输入按钮

    input::-webkit-input-speech-button {display: none}

    //ios和android下触摸元素时出现半透明灰色遮罩

    E {

        -webkit-tap-highlight-color:rgba(255,255,255,0)

    }

    //消除transition闪屏

    E {

        /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/

        -webkit-transform-style: preserve-3d;

        /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

        -webkit-backface-visibility: hidden;

    }

    //启用3D加速

    E {

        -webkit-transform:translate3d(0, 0, 0)

        transform: translate3d(0, 0, 0);

    }

    //GPU加速

    CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video来触发GPU渲染

    //长时间按住页面出现闪退

    E {

        -webkit-touch-callout: none;

    }

    //手机拍照和上传图片

    <input type="file">的accept 属性

    <!-- 选择照片 -->

    <input type=file accept="image/*">

    <!-- 选择视频 -->

    <input type=file accept="video/*">

    <input type="text"/>

    输入框:

    -webkit-appearance:none;//iphone下去掉边框阴影

    -webkit-tap-highlight-color:transparent;//去掉高亮背景

    -webkit-user-select: text;//显示输入的文字

    一.文件命名规范

    全局样式:global.css;

    框架布局/布局,版面:layout.css;

    字体样式:font.css;

    链接样式:link.css;

    打印样式:print.css;

    主要的master.css

    专栏columns.css

    主题themes.css

    ……

    二.常用类/ID命名规范

    页 眉:header

    内 容:content

    容 器:container

    页 脚:footer

    版 权:copyright

    导 航:menu

    主导航:mainMenu / mainnav

    子导航:subMenu / subnav

    标 志:logo

    标 语:banner

    标 题:title

    商 标:label

    侧边栏:sidebar

    图 标:Icon

    注 释:note

    搜 索:search

    按 钮:btn

    登 录:login

    链 接:link

    信息框:manage

    外 套:wrap

    顶导航:topnav

    边导航:sidebar

    左导航:leftsidebar

    右导航:rightsidebar

    标 语\广告:banner

    菜单内容1:menu1 content

    菜单容量:menu container

    子菜单: submenu

    边导航图标:sidebarIcon

    注释:   note

    面包屑:  breadcrumb(即页面所处位置导航提示)

    容器:   container

    内容:   content

    搜索:   search

    登陆:   Login

    功能区:  shop(如购物车,收银台)

    当前的   current

    NameName

    name_name

    1440 1080 720 480 360 320

    搭建html开发平台(Visual Studio Code及相关插件安装.)

    手机端浏览器分辨率市场调研

    搭建SVN及测试服务器

    安装less及指定使用方式。

    UI基本尺寸确立

    UI基本颜色及布局确定

    动态效果设计

    首页模板

    测图软件MarkMan的使用

    基本框架搭建

    手机端测试

    制定开发标准,以及自适应解决方案。

    制定CSS样式命名方式。

    苹果ID审请

    域名购买及云服务器设计

    带领团队,适应新的开发模式。

    测试页面的检查,以及相关前端问题的解决。

    常见问题

    1、移动端如何定义字体font-family

    三大手机系统的字体:

    ios 系统

    默认中文字体是Heiti SC

    默认英文字体是Helvetica

    默认数字字体是HelveticaNeue

    无微软雅黑字体

    android 系统

    默认中文字体是Droidsansfallback

    默认英文和数字字体是Droid Sans

    无微软雅黑字体

    winphone 系统

    默认中文字体是Dengxian(方正等线体)

    默认英文和数字字体是Segoe

    无微软雅黑字体

    各个手机系统有自己的默认字体,且都不支持微软雅黑

    如无特殊需求,手机端无需定义中文字体,使用系统默认

    英文字体和数字字体可使用 Helvetica ,三种系统都支持

    1、 移动端定义字体的代码 */

    body{font-family:Helvetica;}

    2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

    <meta  name="msapplication-tap-highlight"  content="no">

    3、webkit表单元素的默认外观怎么重置

    .css{-webkit-appearance:none;}

    4、webkit表单输入框placeholder的颜色值能改变么

    input::-webkit-input-placeholder{color:#AAAAAA;}

    input:focus::-webkit-input-placeholder{color:#EEEEEE;}

    5、webkit表单输入框placeholder的文字能换行么

    ios可以,android不行~

    6. 关闭iOS键盘首字母自动大写

    在iOS中,默认情况下键盘是开启首字母大写的功能的,如果启用这个功能,可以这样:

    <input type="text" autocapitalize="off" />

    7. 关闭iOS输入自动修正

    和英文输入默认自动首字母大写那样,IOS还做了一个功能,默认输入法会开启自动修正输入内容,这样的话,用户经常要操作两次。如果不希望开启此功能,我们可以通过input标签属性来关闭掉:

    <input type="text" autocorrect="off" />

    8. 禁止文本缩放

    当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:

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

    需要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置 `meta viewport’。

    9. 移动端如何清除输入框内阴影

    在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:

    input,

    textarea {

      border: 0; /* 方法1 */

      -webkit-appearance: none; /* 方法2 */}

    10. 快速回弹滚动

    我们先来看看回弹滚动在手机浏览器发展的历史:

    早期的时候,移动端的浏览器都不支持非body元素的滚动条,所以一般都借助 iScroll;

    Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动;

    Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果,不过随后这个特性又被移除;

    iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

    在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:

        .xxx {

            overflow: auto; /* auto | scroll */

            -webkit-overflow-scrolling: touch;

          }

    PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,官方地址:

    iDangero

    11.禁止复制该文本  如果用户可以选择,则给用户以网页的感觉,App高大上的感觉就出不来了

    test{

      -moz-user-select: none; /*火狐*/

      -webkit-user-select: none;  /*webkit浏览器*/

      -ms-user-select: none;  /*IE10*/

      -khtml-user-select: none; /*早期浏览器*/

      user-select: none;}

    12. 移动端取消touch高亮效果

    在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:

    html {

        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    }

    但这个方法在三星的机子上无效,有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。

    13. 如何禁止保存或拷贝图像(IOS)

    通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:

    img { -webkit-touch-callout: none; }

    14、假如手机网站不用兼容IE浏览器,一般我们会使用zeptojs。

    zeptojs内置Touch events方法,具体可以看http://zeptojs.com/#Touch events

    看了一下zeptio新版的API,已经支持IE10以上浏览器,对zeptojs可以选择使用!

    15、防止手机中网页放大和缩小。

      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

      当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。

    16、apple-mobile-web-app-capable

    apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。

    如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

    17、format-detection

    format-detection 启动或禁用自动识别页面中的电话号码。

    语法:

    说明:

    默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

    18、Html5调用安卓或者iOS的拨号功能

            <a href="tel:13638657008">13638657008</a>

            <a href="sms:139xxxxxxx">一键发送短信</a>

    19、html5GPS定位功能

    具体请看:http://www.w3school.com.cn/html5/html_5_geolocation.asp

    20、上下拉动滚动条时卡顿、慢  Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

    body {

            -webkit-overflow-scrolling: touch;

            overflow-scrolling: touch;

        }

    21、长时间按住页面出现闪退

    element { -webkit-touch-callout: none;}

    22、iphone及ipad下输入框默认内阴影

    Element{

      -webkit-appearance: none;

    }

    23、ios和android下触摸元素时出现半透明灰色遮罩

    Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}

    24、active兼容处理 即 伪类 :active 失效

    方法一:body添加ontouchstart

    方法二:js给 document 绑定 touchstart 或 touchend 事件

    a {color: #000;}

    a:active {color: #fff;}

    bar

    document.addEventListener('touchstart',function(){},false);

    25、动画定义3D启用硬件加速

    Element {

    -webkit-transform:translate3d(0, 0, 0)

    transform: translate3d(0, 0, 0);

    }

    26、Retina屏的1px边框

    Element{

      border-width: thin;

    }

    27、webkit mask 兼容处理

    某些低端手机不支持CSS3 mask,可以选择性的降级处理。

    比如可以使用js判断来引用不同class:

    if( ‘WebkitMask’ in document.documentElement.style){

    alert(‘支持mask’);

    } else {

    alert(‘不支持mask’);

    }

    27、浏览器私有及其它meta

    以下属性在项目中没有应用过,可以写一个demo测试以下!

    QQ浏览器私有

      全屏模式

      <meta name="x5-fullscreen" content="true">

      强制竖屏

      <meta name="x5-orientation" content="portrait">

      强制横屏

      <meta name="x5-orientation" content="landscape">

      应用模式

      <meta name="x5-page-mode" content="app">

    UC浏览器私有

      全屏模式

        <meta name="full-screen" content="yes">

      强制竖屏

      <meta name="screen-orientation" content="portrait">

      强制横屏

      <meta name="screen-orientation" content="landscape">

    应用模式

    <meta name="browsermode" content="application">

    其它

    针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

    <meta name="HandheldFriendly" content="true">

    微软的老式浏览器

    <meta name="MobileOptimized" content="320">

    windows phone 点击无高光

    <meta name="msapplication-tap-highlight" content="no">

    29、旋转屏幕时,字体大小调整的问题

    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

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

    }

    30、transition闪屏

    /设置内嵌的元素在 3D 空间如何呈现:保留3D /

    -webkit-transform-style: preserve-3d;

    / 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /

    -webkit-backface-visibility:hidden;

    31、圆角bug  某些Android手机圆角失效

    background-clip: padding-box;

    32、顶部状态栏背景色

    说明:

    除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。

    如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。

    如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。

    如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。

    默认值是default。

    33、ios 设置input 按钮样式会被默认样式覆盖

    解决方式如下:

    input,

    textarea {

      border: 0;

      -webkit-appearance: none;

    }

    34.安卓里有一像素白边问题

    图片描述

    像这个结构可以用dl dd dt 结构写,dl的width可以有两种设置的方法:

    (1)width:100%;(2)width:94%;pading:3%;

    以上两种设置宽度的方式都可以,但是第二种会出现1像素白边的问题,所以建议用第一种,

    边距在dd,dt里设置这个问题只有在安卓里才出现的,用谷歌里的模拟器测不出来,只有用手机才能看出来,

    我用三星小米的手机都测出有这个问题

    35.手机端去掉点击时默认的边框

    *:focus {outline: none;}

    * { -webkit-tap-highlight-color: trans

    36、苹果手机的一些设置。

    <meta name="apple-mobile-web-app-capable" content="yes">

    如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。

    你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

    37、format-detection设置。

    <meta name="format-detection" content="telephone=no">

    <meta name="format-detection" content="email=no">

    format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。

    38、ios和android下触摸元素时出现半透明灰色遮罩

    Element {

        -webkit-tap-highlight-color:rgba(255,255,255,0)

    }

    39、动画定义3D启用硬件加速

    Element {

        -webkit-transform:translate3d(0, 0, 0)

        transform: translate3d(0, 0, 0);

    }

    注意:3D变形会消耗更多的内存与功耗

    40、旋转屏幕时,字体大小调整的问题

    *{

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

    }

    41、IOS中input键盘事件keyup、keydown、keypress支持不是很好

    问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!

    解决方法:可以用html5的oninput事件去代替keyup

    <input type="text" id="testInput">

    <script type="text/javascript">

        document.getElementById(‘testInput‘).addEventListener(‘input‘, function(e){

            var value = e.target.value;

        });

    </script>

    42、图片无法正常加载时 用默认图片替代的功能

    <img src="img/1.jpg"  onerror = "javascript:this.src= 'img/default.png';" > 

    43、 禁止鼠标右键

      <img  src="img/1.jpg"  oncontextmenu = "return false" >

    44. audio元素和video元素在ios和andriod中无法自动播放

    $('html').one('touchstart',function(){

          audio.play()

      })

    相关文章

      网友评论

          本文标题:移动端开发注意事项

          本文链接:https://www.haomeiwen.com/subject/qyukbqtx.html