webapp中class和id只有识别background-

无需加好友免费技术支持

下列仅仅我个人的汇总。假如你得到更好的提议，请留言，一起激励发展！- -！

1.回应开发设计web，换句话说，网页页面务必适应屏幕大小，可以用液体合理布局，至始一篇文章（响应式宽度合理布局），别的实际的小问题能使用media query处理（让IE适用CSS3 Media Query完成响应式网站Web设计和CSS3 Media Queries）；

2.由于手机上基本上都是高端电脑浏览器，可以用html5 css3开发设计；

3.应用有效灵便meta详细如下：

第一个meta标签表明：强制性维持文本文档宽度及设备宽度1：1，文本文档较大宽度之比1.不可以客户点击屏幕放大访问；

第二个meta标签是iphone设备上的safari私meta标签表明：容许全屏幕访问，掩藏电脑浏览器导航条；

第三个meta标签也是iphone它指定私标签iphone中safari顶端情况条样式的；

第四个meta标签表明：告知机器设备忽视将页面上的数字识别为联系电话，必要时鉴别，要这样开启:

别的比较常见的标签：

4.一定要注意连接的尺寸，由于大多数都是触摸屏手机，那样客户就能轻松点击标签(我之前看了本文，但是现在找不着由来，像是最小42。px*42px）:

实际操作对象尺寸合乎手指实际操作，按键大小设定标准：

点击无名指间隔 大约为7*7 mm， 1mm间隔，

大拇指点击8*8 mm，2mm间隔。推荐值为9mm 最少规格不低于7mm。

自然，一些关键操作或经常点击的地区能设得稍大一些。

5.雅致降权(平稳衰退)要少使用JS，严禁客户免费下载图片JS网页页面还可以体现与图片其价值(因为大部分)APP默认为3G不自动下载图片等优质)。

6.针对图片的处理方法，只需设定宽度，使图片响应式，避免图片形变，自然，当机器设备分辨率相差很大时，那就需要使用media queries针对不同的分辨率载入不同类型的图片（必须设定同样的规格型号），避免小分辨率机器设备载入大图片浪费流量，避免大分辨率机器设备载入小图片所造成的图片模糊不清。

7.当设定分辨率过小，表明正常的控制模块太拥堵时，能使用media queries768px下面的图表明2列合理布局，320px表明1列合理布局等。

8.自然，你还可以根据分辨跳转不同类型的终端设备URL。

9.浏览器多且乱，手机的系统的默认设置处理办法法不一样，兼容问题也不尽相同PC版本简易，要汇总常见的处理方式；

总流量针对挪动平板电脑的手机端而言至关重要，因此webapp中class和id尽可能中断点取名，假如头顶部能够被命名为hd,正中间为bd,底端为ft等候(此提议未确定，由于充分考虑维护成本是不是便捷)；

实际工作经验提议：

1、

-webkit-tap-highlight-color:rgba(255，255，255ios和android点击原素时阴影。

备注名称：transparent的属性值在android下失效。

2、-webkit-appearance:none可以同时屏蔽掉文本框中怪异的内阴影，解决方法iOS按钮样式没法改动，检测还发现了一个小毛病，即加上以上属性后，iOS默认设置前提下依然存在圆弧，但能应用 border-radius属性改动。

3、

-webkit-transform:translate3d(0, 0, 0)在ios动漫可以更加顺畅(这一属性会启用硬件加速器方式，不用根据JS模块，立即浏览器兼容性3D渲染)，但android不能随便用，许多见所没有的dug也正因如此。

4、@-webkit-keyframes你能够预订许多你想到的影片，再通过-webkit-transition来启用。

5、-webkit-background-size能做高清图标，但有些低版android只有识别background-size，因此三者都务必记录下来；最好使用此属性cover这一值能够智能匹配宽度和相对高度。

6、border-radius、box-shadow、gradient、border-image，不过多解释，能够精减编码。

7、android、ios4以下的，固定不动宽/高块元素overflow:scroll/auto常见故障，归属于电脑浏览器bug，可依靠第三方工具完成。

8、ios5 能通过scrollTo(0，0)隐藏浏览器地址栏。

9、css动画会影响自己的自动聚焦，因此自动聚焦需要在动漫实行前进行，或是果断放弃。

10.假如涉及到更多境外连接，DNS Prefetching能够给你做DNS预分析。

如果你想要让新网站大量SNS提交，随后Open Graph Protocol会很适合自己。

12、若用iScroll不能使用时长：focus{outline:假类，不然滚动变卡。

13、IOS横竖屏严禁字体变大，-webkit-text-size-adjust: none;

14、iphone的Retina显示器的css数值务必翻番，包含图片尺寸，Retina精美的显示器可以将其解读为Retina显示器里的1清晰度等同于普通2清晰度。

处理屏幕闪烁，

-webkit-backface-visibility:hidden;

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

用以触摸事件touch不得用系列产品click取代；

17.有关电，JPEG节省电（JPEG>PNG>GIF）,图片总数约多，用电量约，AJAX动态性具体内容耗电量，reflow和repaint耗电量，webGL和translate3d耗电量