手机

移动端： ① 安卓浏览器看背景图片，有些设备会模糊，原因是手机的分辨率太小 解决方案： 用2X图片来代替img标签，然后background-size: contain ② 防止手机中页面放大或缩小： 在meta中设置viewport user-scalable = no ③ 上下拉滚动条卡顿： overflow-scrolling: touch; ④ 禁止复制选中文本： user-select: none; ⑤ 长时间按住页面出现闪退：-webkit-touch-callout: none; ⑥ 动画定义3D硬件加速： transform: translate 3d(0,0,0); ⑦ formate-detection 启动或禁止自动识别页面中的电话号码，content = "yes/no" ⑧ a标签添加tel是拨号功能 ⑨ 安卓手机的圆角失效： background-clip: padding-box; ⑩ 手机端300ms延迟： fastclick ① 横平时字体加粗不一致： text-size-adjust: 100%; PC端： ① rgba不支持IE8 用opacity属性代替rgba设置透明度 ② 图片加a标签在IE9中出现边框 解决方案： img{border: none;} ③ IE6不支持display: inline-block 设置为： display:

随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5 viewport的使用能帮你做到这一点…… viewport 语法介绍： 01 <!-- html document --> 02 < meta name = "viewport" 03 content = " 04 height = [pixel_value | device-height] , 05 width = [pixel_value | device-width ] , 06 initial-scale = float_value , 07 minimum-scale = float_value , 08 maximum-scale = float_value , 09 user-scalable = [yes | no] , 10 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 11 " 12 /> width 控制 viewport 的大小，可以指定的一个值或者特殊的值，如

1像素边框问题 这个默认是移动端的问题了。由于移动端一般都会设置屏幕宽度为设备宽度， width=device-width,initial-scale=1 , 而有些屏幕是2倍屏，导致在移动端上设置 1px 就是看上去的 2px 。 解决方法： 通过 transform 将宽度缩小一半， transform:scaleY(0.5) 通过 @media 媒体查询，查询当前设置的屏幕倍率，统一设置 transform , 参考: 移动端(手机)1像素边框真正实现 模仿淘宝(不确定是不是来自淘宝的)，设置屏幕宽度为设计师的设计尺寸(一般为750)。 <meta name= "viewport" content= "width=750, user-scalable=no" > 由于移动端不同设备的dpr不同，所以1px边框的设计如下 dpr:物理像素与设备像素比 border-1px($color) position: relative &::after dispaly:block position:absolute left: 0 bottom:0//定位到元素下面 width:100%//相对于父元素是100%宽度 border-bottom:1px solid $color content:' 使用函数：函数所在位置 即为 函数中代码所在位置 以下针对不同dpr进行缩放 @media

html： <div class='item'> <div class = 'container' /> </div> css: .item { width: 100% ; height: 100% ; .container { max -width: 100% ; height: auto; min -height: 600px; // 这里可监听屏幕变化，改变最小高度 position: absolute; left: 50% ; top: 50% ; transform: translate( -50%, -50%); // 利用位移实现居中 background-image: url(./img/1 .png); background -size: 100% ; background -repeat: no- repeat; background -position: center 0 ; 　　　　　} } 转载于:https://www.cnblogs.com/aloehui/p/10238299.html 来源： CSDN 作者： weixin_34049032 链接： https://blog.csdn.net/weixin_34049032/article/details/93737553

一. UI 控件适配问题: 1. EditText 1 ) . 指定 EditText 的 imeOption 为 "actionNext" 并监听 onEditorAction事件, actionId 在 华为P10 手机上会返回 IME_ACTION_UNSPECIFIED, 而不是返回 IME_ACTION_NEXT 来源： CSDN 作者： wfive.dong 链接： https://blog.csdn.net/dongwenwu_001/article/details/72466148

1 为什么要进行Android屏幕适配 由于 Android 系统的开放性，任何用户、开发者、 OEM 厂商、运营商都可以对 Android 进行定制，于是导致： Android 系统碎片化 ： 小米定制的 MIUI 、魅族定制的 flyme 、华为定制的 EMUI 等等——当然都是基于 Google 原生系统定制的； Android 机型屏幕尺寸碎片化 ： 5 寸、 5.5 寸、 6 寸等等； Android 屏幕分辨率碎片化 ： 320x480 、 480x800 、 720x1280 、 1080x1920。 屏幕尺寸分布图 据友盟指数显示，统计至 2015 年 12 月，支持 Android 的设备共有 27796 种。 当 Android 系统、屏幕尺寸、屏幕密度出现碎片化的时候，就很容易出现同一元素在不同手机上显示不同的问题。 虽然系统为使您的应用适用于不同的屏幕，会进行缩放和大小调整，但您应针对不同的屏幕尺寸和密度优化应用。 这样可以最大程度优化所有设备上的用户体验，用户会认为您的应用实际上是专为他们的设备而设计，而不是简单地拉伸以适应其设备屏幕。 2 相关概念 2.1 屏幕尺寸 含义：按屏幕对角测量的实际物理尺寸。 为简便起见， Android 将所有实际屏幕尺寸分组为四种通用尺寸：小、 正常、大和超大 单位 : 英寸（ inch ），一英寸≈ 2.54cm 2.2

1 <script> 2 var phoneWidth = parseInt(window.screen.width); 3 var phoneHeight = parseInt(window.screen.height); 4 var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率 5 var ua = navigator.userAgent; 6 if (/Android (\d+\.\d+)/ .test(ua)) { 7 var version = parseFloat(RegExp.$1 ); 8 // andriod 2.3 9 if (version > 2.3 ) { 10 document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">' ); 11 // andriod 2.3以上 12 } else { 13 document.write('<meta name="viewport" content="width=device-width,user

viewport 语法介绍 <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] "/> width 控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height 和 width 相对应，指定高度。 initial-scale 初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。 maximum-scale 最大缩放

移动端页面按手机屏幕分辨率自动缩放的js 复制代码 <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率 var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); // andriod 2.3 if (version > 2.3) { document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">'); // andriod 2.3以上 } else { document.write('<meta name="viewport" content="width=device-width,user

为大家介绍一款比较实用的iPhone数据传输辅助软件，这款名为AnyMP4 iPhone Transfer Pro的软件能够帮助大家快速的将iPhone传输到Mac，不光如此该软件还支持其他iOS设备之间的数据传输，还能够将文件同步到iTunes进行自动备份，是一款非常好用的软件。 AnyMP4 iPhone Transfer Pro for Mac是最好的Mac iPhone Transfer软件。它不仅可以帮助您将文件（如音乐，照片，视频，语音备忘录，笔记等）从iPhone传输到Mac，还可以在iOS设备之间传输，甚至可以将文件同步到iTunes。此外，它还可以将iPhone短信和联系人备份到Mac。 1.将数据从iPhone / iPad / iPod传输到Mac，iTunes AnyMP4 Mac iPhone Transfer Pro是适用于所有iPhone用户的最佳iOS数据传输软件。这款适用于Mac的iPhone Transfer Pro可轻松将各种iOS数据从iPhone，iPod和iPad传输到Mac和iTunes。作为专业的iPhone数据传输软件，它可以在没有iTunes的情况下在iPhone / iPad / iPod和Mac之间传输文件。支持多种文件类型，例如音乐，照片，视频，语音备忘录，笔记，相机拍摄，电影，电视节目，播客，iTunes U，铃声