1042 条评论分享收藏感谢收起taobao.com ，所有 移动用户 都自觉访问
？不可能吧 ＝ ＝。于是，我们还是得依靠前端或服务器端的一次 “响应”（设备检测），做 URL 重定向，才能将不同设备的用户带到那个为他们准备的网站。所以其实在我看来，手机和PC端分开来写，只是 狭义响应式设计 的一种发展和延伸罢了。他们的界限没有，也并不需要那么清晰。就如开题所引用的：事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。“而无论是用什么解决方案。” —— 这句是我补的。故我的结论是：这不是一个二选一的问题，而是选择一个合适的度（你的桌面版本代码与移动版本代码分离、耦合的程度）而这个度，则是由你的设计需求决定的。而我们的需求原点其实也很简单： “根据你的产品特点，进行两种不同的设计”。以上。赞同 895 条评论分享收藏感谢收起网站移动端和手机app有什么区别_百度知道
该问题可能描述不清，建议你
网站移动端和手机app有什么区别
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
zxsrealboy
来自电子数码类芝麻团
zxsrealboy
采纳数：1037
获赞数：2702
参与团队：
手机移动端是pc网站的手机版，app是一个单独的应用打包安装在手机上的，用来实现你pc网站的部分或全部功能。app能展示的网站功能较网站移动版较多。一般网站移动版不会去实现复杂的功能与交互。
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。342 条评论分享收藏感谢收起赞同 132 条评论分享收藏感谢收起pc端和app端的区别是什么？ - 桃子先生 - 博客园
一、招聘网站看见一条招聘要求：熟悉互联网与移动互联网产品区别，简单思考一下。
1.用户：一种情况，用户使用过PC端产品觉得好用后才在手机上安装移动端产品；另一种情况，某些人群因各种原因无法使用PC，移动端是他们唯一的选择。
2.接上条，使用场景：PC端产品使用起来更加正式，移动端产品更碎片化、娱乐化。PC端使用场景，室内、桌椅、长时间；移动端使用场景，任何时间、任何地点。如果只使用几分钟，一般人是不会开电脑的，直接在手机操作就可以了。随着3G、4G资费的下调，人们在等车、坐车、排队时碎片化的使用方式一定会增加。
3.设计逻辑：PC端由于显示面积大，鼠标键盘交互精确，适合流程复杂、规模更大的任务。移动端由于屏幕小、触摸交互及碎片的使用场景，要求流程清晰、简单，适合快速使用的任务。
4.载体特点：移动端特点为移动便携，结合重力感应、GPS可实现一些特殊功能，以上是PC不具备的。
5.产业与市场：移动互联网现在还处在快速增长的时期，O2O、智能穿戴设备等，市场机会多，资本也在密切关注。套用一句热门俗语：“站在风口，猪也能飞上天”。
二、APP：&&&&APP为应用程序的缩写，全称为Application，指的是智能手机
的第三方应用程序
APP文件格式：&&&&1、苹果
上APP格式的有ipa，pxl，deb，主要是用在iphone系列产品上；&&&&2、Android系统上APP的格式有：apk， &这里APP主要用在使用安卓系统
的智能手机
上；&&&&3、诺基亚塞班系统
上APP的格式有sis，sisx，主要用在诺基亚手机
上；&&&&4、微软的WindowsPhone7
、WindowsPhone8系统系统上的APP格式为xap。
APP文件格式：&&&&1、苹果
上APP格式的有ipa，pxl，deb，主要是用在iphone系列产品上；&&&&2、Android系统上APP的格式有：apk， &这里APP主要用在使用安卓系统
的智能手机
上；&&&&3、诺基亚塞班系统
上APP的格式有sis，sisx，主要用在诺基亚手机
上；&&&&4、微软的WindowsPhone7
、WindowsPhone8系统系统上的APP格式为xap。
三、电脑PC端和手机wap端的区别在于设备，两者屏幕比例
不一样，因此将PC端的站点放在手机端浏览就会不方便，同样，手机端的wap站
点在PC端浏览也会变形。你可以把手机wap站
理解为手机设备端的网站标准，跟PC是不同的。而APP是第三方开发的应用程序，跟网站无关，点击进入之后是APP应用内部运行，跟手机外部条件就无关了进去之后看到什么内容是第三方开发者决定的。微网站
则是将APP和移动端wap站
相结合的一种新型网站，其实有点类似轻应用，为了更好的跟APP应用相适应而开发一种新型网站，不需要像PC或者wap站一样需要备案，注册域名，购买空间等繁琐的程序。
四、桌面端网络应用和手机应用的差别
不管是桌面端网络应用还是手机应该，性能测试的基本原理是相似的，尤其是对于手机网络应用的测试。两者使用相同的技术，你也不用 为手机应用选择特别 的性能测 试工具。测试工具只需要具备基本的性能测试能力，测试人员基本上会用就行了。尽管如此，手机应用和桌面应用还是有如下几个本质上的区别：
客户端模式
传统网络应用运行在胖客户端上，而手机应用使用的是瘦客户端。胖客户端直接从服务器端访问应用，而不像瘦客户端那样需要将数据通过信号塔中转，因而它比瘦客户端吞吐量更大，速度更快。
网络带宽在性能中担当重要角色，现今的桌面端应用极大地得益于高速网络。移动网路也在带宽方面不断进步，不过任然无法与前者相提 并论。大多数用户在 低于3G 或4G的网络下使用手机，应用的会话时间延长，用户的响应时间也响应增加，同时也消耗了更多电量。相比桌面应用，带宽是导致手机应用性能差的最大原因。
与桌面端应用强大的CS架构不同，手机数据得依靠信号塔传送到用户设备上。信号塔之间的数据传送一直以来都很慢，也使得手机应用性能变差。
网络应用可以借助桌面电脑的高速处理器和内存最大化地提高性能，然而移动设备的资源却非常有限。移动设备只能依靠有限的电池和内存资源。
不像桌面应用那样通过点击鼠标来操作，移动设备使用手指操作从而获得更好的用户体验。手指操作不如鼠标来得快。何况，设备其实需要将触摸动作翻译成点击。
在移动网路中，流量是收费的。数据缓存技术是桌面应用中提高用户体验的常用手段，但由于流量限制，此项技术在移动应用中无法实现。
由于架构不同，网络和移动应用的性能指标也有些许差别。除了常规指标如响应时间和资源利用量之外，还需要监控电池消耗、二进制大小等等。
使用场景的区别。PC端产品使用起来更加正式，移动端产品更加碎片化、娱乐化。PC端使用场景：室内、桌椅、长时间；移动端使用场景：任何时间、任何地点。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
点击阅读原文
H5移动端页面常见兼容问题及解决方案
日 发布，来源：
Meta基础知识：
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
//一、HTML页面结构
&meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /&
设置viewport宽度，为一个正整数，或字符串‘device-width’
设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale
默认缩放比例，为一个数字，可以带小数
// minimum-scale
允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale
允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable
是否允许手动缩放
//二、JS动态判断
var phoneWidth =
parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userA
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version&2.3){
document.write('&meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi"&');
document.write('&meta name="viewport" content="width=640, target-densitydpi=device-dpi"&');
document.write('&meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"&');
空白页基本meta标签 &!-- 设置缩放 --&
&meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /&
&!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） --&
&meta name="apple-mobile-web-app-capable" content="yes" /&
&!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） --&
&meta name="apple-mobile-web-app-status-bar-style" content="black" /&
&!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 --&
&meta name="format-detection"content="telephone=no, email=no" /&其他meta标签 &!-- 启用360浏览器的极速模式(webkit) --&
&meta name="renderer" content="webkit"&
&!-- 避免IE使用兼容模式 --&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --&
&meta name="HandheldFriendly" content="true"&
&!-- 微软的老式浏览器 --&
&meta name="MobileOptimized" content="320"&
&!-- uc强制竖屏 --&
&meta name="screen-orientation" content="portrait"&
&!-- QQ强制竖屏 --&
&meta name="x5-orientation" content="portrait"&
&!-- UC强制全屏 --&
&meta name="full-screen" content="yes"&
&!-- QQ强制全屏 --&
&meta name="x5-fullscreen" content="true"&
&!-- UC应用模式 --&
&meta name="browsermode" content="application"&
&!-- QQ应用模式 --&
&meta name="x5-page-mode" content="app"&
&!-- windows phone 点击无高光 --&
&meta name="msapplication-tap-highlight" content="no"&
常见问题：
移动端如何定义字体font-family
@ --------------------------------------中文字体的英文名称
@ 微信雅黑
Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新细明体
@ 仿宋_GB2312
FangSong_GB2312
@ 楷体_GB2312
KaiTi_GB2312
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,H }
打电话发短信写邮件怎么实现 // 一、打电话
&a href="tel:"&打电话给:&/a&
二、发短信，winphone系统无效
&a href="sms:10086"&发短信给: 10086&/a&
// 三、写邮件
//注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头
//1.普通邮件
&a href="mailto:"&点击我发邮件&/a&
//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
&a href="mailto:?cc="&点击我发邮件&/a&
//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
&a href="mailto:?cc=&bcc="&点击我发邮件&/a&
//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
&a href="mailto:@qq."&点击我发邮件&/a&
//5.包含主题，用?subject=
&a href="mailto:?subject=邮件主题"&点击我发邮件&/a&
//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行
&a href="mailto:?body=邮件主题内容%0A腾讯诚信%0A期待您的到来"&点击我发邮件&/a&
//7.内容包含链接，含http(s)://等的文本自动转化为链接
&a href="mailto:?body=http://www.baidu.com"&点击我发邮件&/a&
//8.内容包含图片（PC不支持）
&a href="mailto:?body=&img src='images/1.jpg' /&"&点击我发邮件&/a&
//9.完整示例
&a href="mailto:@qq.?cc=&bcc=&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A&img src='images/1.jpg' /&"&点击我发邮件&/a&
移动端touch事件（区分webkit和winphone） /* 当用户手指放在移动设备在屏幕上滑动会触发的touch事件 */
// 以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
//TouchEvent说明：
touches：屏幕上所有手指的信息
targetTouches：手指在目标区域的手指信息
changedTouches：最近一次触发该事件的手指信息
touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息
//参数信息(changedTouches[0])
clientX、clientY在显示区的坐标
target：当前元素
//事件响应顺序
ontouchstart
& ontouchmove
& ontouchend & onclick
// 以下支持winphone 8
MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action:}可以阻止默认情况的发生：阻止页面滚动
MSPointerUp——当手指离开屏幕时触发
移动端click屏幕产生200-300ms的延时响应 说明：移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。
以下是历史原因，来源一个公司内一个同事的分享：
2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。
双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接&a href="#"&&/a&，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。
//解决方案：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
Rentina显示屏原理及设计方案 说明：retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。
那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100height:100background-size:100px 100}
//其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}
//image-set设计Rentina背景图
image-set,webkit私有属性，也是CSS4的属性，为解决Rentina屏幕下的图像而生。
background: url(images/bg.jpg) no-
background: -webkit-image-set(
url(images/bg.jpg) 1x,
//支持image-set普通屏
url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan
点击元素产生背景或边框怎么去掉 /ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
//android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
//winphone系统,点击标签产生的灰色半透明背景，能通过设置&meta name="msapplication-tap-highlight" content="no"&去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext- //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
&meta name="msapplication-tap-highlight" content="no"&
美化表单元素 //一、使用appearance改变webkit浏览器的默认外观
input,select { -webkit-appearance: appearance: }
//二、winphone下，使用伪元素改变表单元素默认外观
//1.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰
select::-ms-expand { display: }
//2.禁用radio和checkbox默认样式，::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display: }
//3.禁用pc端表单输入框默认清除按钮，::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display: }
移动端字体单位font-size选择px还是rem // 如需适配多种移动设备，建议使用rem。以下为参考值：
html { font-size: 62.5%; }
//10*16 = 62.5%
//设置12px字体
这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级
body { font-size:12 font-size:1.2 }
超实用的CSS样式 //去掉webkit的滚动条——display:
//其他参数
::-webkit-scrollba //滚动条整体部分
::-webkit-scrollbar-thumb
//滚动条内的小方块
::-webkit-scrollbar-track
//滚动条轨道
::-webkit-scrollbar-button
//滚动条轨道两端按钮
::-webkit-scrollbar-track-piece
//滚动条中间部分，内置轨道
::-webkit-scrollbar-corner
//边角，两个滚动条交汇处
::-webkit-resizer
//两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
// 禁止长按链接与图片弹出菜单
a,img { -webkit-touch-callout: none }
// 禁止ios和android用户选中文字
html,body {-webkit-user-select: user-select: }
// 改变输入框placeholder的颜色值
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
// android上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
// 阻止windows Phone的默认触摸事件
/*说明：winphone下默认触摸事件事件使用e.preventDefault是无效的，可通过样式来禁用，如：*/
html { -ms-touch-action: } //禁止winphone默认触摸事件
取消input在ios下，输入的时候英文首字母的默认大写
&input autocapitalize="off" autocorrect="off" /&
手机拍照和上传图片
//IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持
&input type="file" accept="images/*" /&
&input type="file" accept="video/*" /&
屏幕旋转的事件和样式 //JS处理
function orientInit(){
var orientChk = document.documentElement.clientWidth & document.documentElement.clientHeight?'landscape':'portrait';
if(orientChk =='lapdscape'){
//这里是横屏下需要执行的事件
//这里是竖屏下需要执行的事件
orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
setTimeout(orientInit, 100);
//竖屏时样式
@media all and (orientation:portrait){
//横屏时样式
@media all and (orientation:landscape){
audio元素和video元素在ios和andriod中无法自动播放 //音频，写法一
&audio src="music/bg.mp3" autoplay loop controls&你的浏览器还不支持哦&/audio&
//音频，写法二
&audio controls="controls"&
&source src="music/bg.ogg" type="audio/ogg"&&/source&
&source src="music/bg.mp3" type="audio/mpeg"&&/source&
优先播放音乐bg.ogg，不支持在播放bg.mp3
//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
music.play();
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常
//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间
重力感应事件 // 运用HTML5的deviceMotion，调用重力感应事件
if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
var acceleration = event.accelerationIncludingG
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX)&speed || Math.abs(y-lastY)&speed || Math.abs(z-lastZ)&speed ){
//这里是摇动后要执行的方法
yaoAfter();
function yaoAfter(){
//do something
//说明：说见案例摇一摇效果中yao.js
微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整 //以下代码可使Android机页面不再受用户字体缩放强制改变大小，但是会有1S左右延时，期间可以考虑loading来处理
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
alert(JSON.stringify(res));
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
alert(JSON.stringify(res));
//IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小
body { -webkit-text-size-adjust:100%! }
//最好的解决方案：最好使用rem或百分比布局
定位的坑 //fixed定位
//1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
//2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
//3.ios4下不支持position:fixed
//解决方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如：
&div id="wrapper"&
&script src="iscroll.js"&&/script&
function loaded(){
myscroll=new iScroll("wrapper");
window.addEventListener("DOMContentLoaded",loaded,false);
//position定位
//Android下弹出软键盘弹出时，影响absolute元素定位
//解决方案:
var ua = navigator.userAgent.indexOf('Android');
if(ua&-1){
$('.ipt').on('focus', function(){
$('.css').css({'visibility':'hidden'})
}).on('blur', function(){
$('.css').css({'visibility':'visible'})
播放视频不全屏 &!--
1.ios7+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏
webkit-playsinline="true"
&video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"&&/video&
JS判断设备 function deviceType(){
var ua = navigator.userA
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i&len,len = agent. i++){
if(ua.indexOf(agent[i])&0){
deviceType();
window.addEventListener('resize', function(){
deviceType();
JS判断微信浏览器 function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
android 2.3 bug //1.@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉
//2.after和before伪类无法使用动画animation
//3.border-radius不支持%单位，如要兼容，可以给radius设置一下较大的值
//4.translate百分比的写法和scale在一起会导致失效，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug //1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
//2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
//3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
//4.android无法同时播放多音频audio
消除transition闪屏 .css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility:
-webkit-perspective: 1000;
开启硬件加速 //目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
渲染优化 //1.禁止使用iframe（阻塞父文档onload事件）
//2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）
//使用CSS3代码代替JS动画；
//开启GPU加速；
//使用base64位编码图片(不小图而言，大图不建议使用)
// 对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU。小图标优势在于：
//1.减少HTTP请求；
//2.避免文件跨域；
//3.修改及时生效；
常用的移动端框架
项目主页：
整理辛苦了，感谢分享！
整理辛苦了，感谢分享！
有的已经不需要兼容了，设置font-family没必要雅黑、宋体什么的，这些手机上根本就没这些字体了
有的已经不需要兼容了，设置font-family没必要雅黑、宋体什么的，这些手机上根本就没这些字体了
感谢分享！
感谢分享！
问一下；在谷歌浏览器；选择iphone7 到了；Iphone7手机上的样式额；在浏览器上的样式是不一样的；这种情况下降如何测试呢
问一下；在谷歌浏览器；选择iphone7 到了；Iphone7手机上的样式额；在浏览器上的样式是不一样的；这种情况下降如何测试呢
已收下，谢谢
已收下，谢谢
辛苦辛苦！
辛苦辛苦！
我要该，理由是：
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）