移动端如何适配ios和安卓_移动端一套图适配安卓和ios - CSDN
精华内容
参与话题
  • 常见苹果适配问题: 【问题1】:iPhone页面会自动把数字当成电话号码,点击后自动跳到电话拨号界面 ♥♥♥方案:<meta name="format-detection" content="telephone=no" /> 【问题2】微信浏览器自动调整...

    常见苹果适配问题:

    【问题1】:iPhone页面会自动把数字当成电话号码,点击后自动跳到电话拨号界面
    ♥♥♥方案:<meta name="format-detection" content="telephone=no" />

    【问题2】微信浏览器自动调整页面字体大小
    ♥♥♥方案:禁止微信浏览器调整页面字体大小:

    			body{
    				-webkit-text-size-adjust:100% !important;
    			}
    

    【问题3】用户随意选中页面文字及图片
    ♥♥♥方案:如无文本选中需求,此为必选项

    			body{
    				-webkit-user-select: none;
    			}
    

    【问题4】iPhone长按图片保存图片弹窗
    ♥♥♥方案:关闭长按图片保存图片弹窗

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

    【问题5】 iPhone输入框的光标发生位移,上移或者下移
    ♥♥♥方案:不要设置line-height即可

    【问题6】苹果手机上的input按钮自带渐变效果
    ♥♥♥方案:加上outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机上的input按钮自带圆角需要按需要去掉.

    		<style type="text/css">
    			input[type=button],input[type=reset],input[type=submit]{
    				resize: none;
    				border: none;
    				outline: none;
    				/*appearance允许使元素看上去像标准的用户界面元素*/
    				-webkit-appearance: none;
    				border-radius: 0;
    			}
    		</style>
    

    【问题7】表单input元素获取焦点时页面被放大

    –表现:在iPhone上点击input框会有一个动画效果,这是苹果公司默认设置的,每次input获取焦点都会使页面放大,效果非常不好看
    ♥♥♥方案:–加入meta标记-------user-scalable改为no即可

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

    【问题8】iPhone移动端input 无法获取焦点

    原因:在移动端开发中,我们有时有针对性的写一些特殊的重置,在整个项目之中有一个需求,禁止用户进行复制.选择.,于是写了这样的代码 -webkit-user-select: none;影响到了input获取焦点。

    ♥♥♥方案:**把-webkit-user-select:none改成-webkit-user-select:auto;**覆盖掉或者直接注释掉就行,如果项目需要,就不用注释了。

    【问题9】360浏览器兼容模式打开项目无法正常浏览

    场景表现:自己写完项目在各个浏览器检查时,并没有问题,当项目给到后台同事的时候,在他们的电脑上用360浏览器兼容模式打开项目,出现不兼容的问题。
    同事的电脑安装的同样都是同一版本的360浏览器。最后,经过查阅资料发现,360兼容模式出现的兼容问题,实质还是IE的兼容问题,同时,每个电脑内置的IE版本是不一样的,开发时电脑内置IE的版本高,而同事的版本低导致出现渲染页面时出现问题。
    ♥♥♥方案:.0<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

    原理:http-equiv=“X-UA-Compatible” 这是一个文档兼容模式的定义Edge模式告诉IE以最高级 模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。这句代码可以改变360兼容模式下以何种版本的IE去渲染页面。

    【问题10】移动端click事件延迟300ms
    ------问题由来:
    1、这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。
    这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因。双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
    那么这和 300 毫秒延迟有什么联系呢?

    2、假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击屏幕
    鉴于iPhone的成功,其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面,在欣喜的时候往往不会care这个300ms的延时问题,可是如今touch端界面如雨后春笋,用户对体验的要求也更高,这300ms带来的卡顿慢慢变得让人难以接受

    3、那么我们该如何解决这个问题,大家可以参考如下的几种方法。
    ①禁用缩放
    ②FastClick插件
    ③JS库jQuery电脑端和zepto.js移动端等js库的tap触屏事件

    ♥♥♥解决方案:
    (1)禁用缩放

    `<meta name="viewport" content="width=device-width, **user-scalable=no**">
    

    (2)FastClick插件-----FastClick是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。这是真正的跨平台方案出来之前一种很好的变通方案。就目前而言,FastClick 非常实际地解决 300 毫秒点击延迟的问题。
    FastClick插件—用法:
    ①引入脚本:引入插件的js文件到HTML网页中,脚本必须加载到实例化fastclick在页面的任何元素之前
    在这里插入图片描述
    ①-----2)如果使用了jquery插件,可以这样编写:
    在这里插入图片描述

    【问题11】不让 Android 手机识别邮箱

    ♥♥♥解决方案:<meta name="format-detection" content="email=no"/>
    

    【问题12】上下拉动滚动条卡顿
    ♥♥♥解决方案:

    body{
    		-webkit-overflow-scrolling: touch;
    		overflow-scrolling: touch;
    	}
    

    移动端开发时css样式初始化reset.css

    涉及属性1:
    text-size-adjust:100%;用百分比来指定文本大小在设备尺寸不同的情况下如何调整

    涉及属性2:
    -webkit-overflow-scrolling:touch;快速滚动和回弹的效果,允许独立的滚动区域和触摸回弹,WebKit私有的属性.

    涉及属性3
    tap-highlight-color:transparent;当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色。
    如果想取消这个高亮,将值设置为全透明即可,比如transparent

    涉及属性4
    appearance:none;解决iPhone圆角问题
    appearance允许使元素看上去像标准的用户界面元素
    appearance: normal常规元素|icon图标(小图片)|window视口|button按钮|menu呈现为一套供用户选择的选项|field呈现为输入字段;
    案例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<meta name="format-detection" content="email=no"/>
    		<style type="text/css">
    			div{
    				width: 200px;
    				height: 20px;
    				appearance: button;
    				-webkit-appearance: button;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    

    在这里插入图片描述

    涉及属性5:
    border-collapse:collapse;表格设置合并边框

    涉及属性6:
    text-size-adjust: 100%; 解决的是chrome等以webkit为内核的浏览器下不支持小于12px的问题,在chrome下,缩小网页,其他元素缩小,但是字体大小不变的问题。 -ms-text-size-adjust: 100%;;解决IE的字体调整问题。

    移动端开发模板

    <!DOCTYPE html>
    <html>
    <head>
        <!-- 声明编码格式 -->
        <meta charset="utf-8">
        <!-- 
            自适应手机屏幕适配: 
              页面宽度为设备屏幕宽度width=device-width、用户是否可以调整缩放比例user-scalable=no 
              初始的缩放比例initial-scale=1.0、最小缩放比例minimum-scale=0.5、
              最大缩放比例maximum-scale=1.0(选填可不加)
        -->
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0">
        <!-- 网站作者 -->
        <meta name="author" content="作者名、昵称、代号等">
        <!-- 网站描述 -->
        <meta name="description" content="本网站为...类型网站,主要服务对象为...">
        <!-- 网站关键词 -->
        <meta name="keywords" content="关键词1,关键词2,...">
        <!-- 禁止链接高亮 -->
        <meta name="msapplication-tap-highlight" content="no">
        <!-- format-detection为格式检测 -->
        <!-- 禁止手机自动将网页中的电话号码显示为拨号的超链接 -->
        <meta name="format-detection" content="telephone=no">
        <!-- 告诉设备不识别邮箱,点击之后不自动发送 -->
        <meta name="format-detection" content="email=no">
        <!-- 禁止跳转至地图功能页面 -->
        <meta name="format-detection" content="adress=no">
        <!-- UC强制竖屏 -->
        <meta name="screen-orientation" content="portrait"> 
        <!-- QQ强制全屏 -->
        <meta name="x5-fullscreen" content="true" />
        <!-- 360-优先使用 IE 最新版本和 Chrome进行渲染 -->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <!-- 网页标题 -->
        <title>网页标题</title>
        <!-- 移动端初始化样式表 -->
        <link rel="stylesheet" type="text/css" href="./reset.css">
        <!-- 自定义样式表 -->
        <link rel="stylesheet" type="text/css" href="">
        <!-- 引入flexible.js或者flexible_simplify.js精简版,解决rem适配与机型计算问题 -->
        <script type="text/javascript" src="./flexible.js"></script>
        <!-- 引入fastClick插件解决移动端点击300ms延迟问题 -->
        <script type="text/javascript" src="./fastclick.js"></script>
        <!-- 实例化fastclick -->
        <script type="text/javascript">
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }
        </script>
        <!-- 自定义脚本文件 -->
        <script type="text/javascript" src=""></script>
    </head>
    <body>
    
    </body>
    </html>
    

    移动端初始化样式表—reset.css

    @charset "utf-8";
    /* 涉及到的H5新标签,之后课程做介绍 */
    html{
    	color:#000;/*默认字体颜色黑色*/
    	background:#fff;/*默认背景白色*/
    	overflow-y:scroll;/*纵向滚动*/
    	/*文本大小根据设备尺寸进行调整,取值auto自动、none不调整、percentage百分比*/
    	-webkit-text-size-adjust:100%;/*用百分比来指定文本大小在设备尺寸不同的情况下如何调整*/
    	-ms-text-size-adjust:100%;
    	/*快速滚动和回弹的效果,允许独立的滚动区域和触摸回弹,WebKit私有的属性*/
    	-webkit-overflow-scrolling:touch
    }
    /*
    	-webkit-text-size-adjust: 100%; 
    	解决的是chrome等以webkit为内核的浏览器下不支持小于12px的问题,在chrome下,缩小网页,其他元素缩小,但是字体大小不变的问题。   
    	-ms-text-size-adjust: 100%;;解决IE的字体调整问题。
     */
    html *{
    	outline:0;
    	-webkit-text-size-adjust:none;
    	/*
    		当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色。
    		如果想取消这个高亮,将值设置为全透明即可,比如transparent
    	 */
    	-webkit-tap-highlight-color:transparent;
    }
    /*
     拓展:
    	(1)设置用户是否能够选中文本user-select
    		取值:none:文本不能被选择;
    			  text:可以选择文本
    			  all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,
    			  	   那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
    		      element:可以选择文本,但选择范围受元素边界的约束
    	
    
    */
    body,html{
    	font-family:"Microsoft YaHei",sans-serif,Tahoma,Arial;
    	/*字体系列:Microsoft YaHei微软雅黑,sans-serif无衬线,Tahoma无衬线字体之大河马字体、Arial无衬线体TrueType字型字体*/
    }
    article,aside,blockquote,body,button,code,dd,details,div,dl,
    dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,
    hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{
    	margin:0;
    	padding:0;
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	box-sizing:border-box
    }
    /*
    	使用了html5标签。IE9一下的浏览器将不支持这些标签元素
    	比如<header;><article;><footer;><figure;>等等。包含 html5.js 文件将会是这些浏览器明白这些新元素。
     */
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    	display:block
    }
    input,input[type=button],input[type=reset],input[type=submit]{
    	resize:none;
    	border:none;
    	/* 
    		appearance允许使元素看上去像标准的用户界面元素
    		appearance: normal常规元素|icon图标(小图片)|window视口|button按钮|menu呈现为一套供用户选择的选项|field呈现为输入字段; 
    	*/
    	/*
    		border-radius兼容iPhone的时候会出现和安卓不一样的效果,小圆角变成半圆角
    		这个时候只需要给该元素添加css ,-webkit-appearance:none;即可解决兼容问题
     	*/
    	-webkit-appearance:none;/*解决iPhone圆角问题*/
    	border-radius:0;/*解决iPhone圆角问题*/
    }
    input,select,textarea{
    	/* 
    		有的元素不会继承根元素字体大小,所以在移动端开发时常设置如下情况
    		重设浏览器默认字体大小h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
    		因为假如你设置body{font-size:12px;},但h1是不会继承这个12px,它会按照一定百分比增加字号,
    		但如果给h1显示指定font-size:100%;它就会继承body设定的字体大小,所以它改变了默认的大小
    	*/
    	/* font-size在IE7-设置px不具有继承性,设置%是为了把 font-size 设置为基于父元素的一个百分比值 */
    	font-size:100%
    }
    table{
    	/*表格设置合并边框*/
    	border-collapse:collapse;
    	/*单元格间隙合并*/
    	border-spacing:0
    }
    fieldset,img{
    	border:0
    }
    abbr,acronym{
    	border:0;
    	/* 
    		设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,
    		但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
    		normal:默认值。浏览器会显示一个标准的字体;
    		small-caps:浏览器会显示小型大写字母的字体;
    		inherit:规定应该从父元素继承 font-variant 属性的值
    	*/
    	font-variant:normal
    }
    /*设置删除线*/
    del{
    	text-decoration:line-through
    }
    address,caption,cite,code,dfn,em,th,var{
    	/*
    		font-style 属性定义字体的风格
    		normal:默认值。浏览器显示一个标准的字体样式。
    		italic:浏览器会显示一个斜体的字体样式。
    		oblique:浏览器会显示一个倾斜的字体样式。
    		inherit:规定应该从父元素继承字体样式
    	 */
    	font-style:normal;
    	font-weight:500
    }
    /*去除列表标记*/
    ol,ul{
    	list-style:none;
    }
    caption,th{
    	text-align:left/*文字左对齐*/
    }
    h1,h2,h3,h4,h5,h6{
    	font-size:100%;/*字体100%继承父级*/
    	font-weight:500/*字体加粗*/
    }
    q:after,q:before{
    	content:'';/*就是引用,在<q></q>标签之间的文字两头加上引号(")*/
    
    	/*<q> 标签定义短的引用。*/
    	/*如代码:<q>替代文字替代文字替代文字替代文字</q>*/
    	/*效果为:"替代文字替代文字替代文字替代文字"*/
    
    /*拓展*/
    	/*<q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。
    	<q> 标签用于简短的行内引用。
    	如果需要从周围内容分离出来比较长的部分(通常显示为缩进的块),请使用 <blockquote> 标签。*/
    }
    
    
    /*sub标签可定义下标文本,sup标签可定义上标文本。*/
    
    /*提示:
    	无论是 <sub> 标签还是和它对应的 <sup> 标签,在数学等式、科学符号和化学公式中都非常有用。
    	<sup> 标签在向文档添加脚注以及表示方程式中的指数值时非常有用。
    	如果和 <a> 标签结合起来使用,就可以创建出很好的超链接脚注。
    */
    sub,sup{
    	font-size:75%;/*字体75%继承父级*/
    	line-height:0;/*行高为0*/
    	position:relative;/*绝对定位*/
    	vertical-align:baseline;/*设置元素的垂直对齐方式。----默认值:baseline*/
    }
    sup{
    	top:-.5em;
    }
    sub{
    	bottom:-.25em;
    }
    a:hover{
    	text-decoration:underline;/*划过a链接出现下划线*/
    }
    a,ins{
    	/*<ins>标签定义已经被插入文档中的文本。*/
    	text-decoration:none;/*删除下划线*/
    }
    a:active,a:hover,a:link,a:visited{
    	/*active:鼠标按下还未释放时的样子*/
    	/*hover:鼠标经过时的链接效果*/
    	/*link:未访问的链接*/
    	/*visited:已访问的链接*/
    	background:0 0;/*默认值*/
    	-webkit-tap-highlight-color:transparent;
    	/*这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,
    	它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
    	想要禁用这个高亮,设置颜色的alpha值为0即可。*/
    	-webkit-tap-highlight-color:transparent;
    	
    	outline:0;
    	/*outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。*/
    
    	text-decoration:none;/*删除下划线*/
    }
    
    展开全文
  • rem移动端布局怎么适配IOS和Android

    千次阅读 2018-07-06 15:14:02
    rem移动端布局怎么适配IOS和Android 昨天“佬大”问我做的h5页面在ios上面显示正常,但是Android就变惨不忍睹了,于是我又开始了度量之路,几个小时过去了......“佬大”问好了没。我说:“还没”那你还是问下...
    展开全文
  • 移动端适配安卓和苹果样式

    千次阅读 2018-05-31 15:05:59
    页面头部添加禁止用户手动调整缩放比例 。 name="viewport"&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"...

    页面头部添加禁止用户手动调整缩放和比例 。 name="viewport"

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


    公用:

    html,body{height: 100%;}
    html{font-size:5.25vw;}
    body{-webkit-text-size-adjust: none;text-size-adjust: none;
    overflow-x:hidden;max-width: 480px;margin-left: auto;margin-right: auto;
    user-select: none;-webkit-user-select: none;position: relative; background: #f3f4f5;}

    html,
    body,
    ul,
    li,
    i,
    em,
    a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    }
    a {
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    outline: 0;
    }
    input{
    outline:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    }
    ul {
    padding-left: 0;
    list-style-type: none;
    }

    展开全文
  • 安卓浏览器看背景图片,有些设备会模糊 解决方案:将背景图片放大为div的2X倍(一般为两倍),背景图尽量高清且大于目标div的尺寸 /*原背景(div宽高都为100px)*/ .div{ background:url(../../XX.png) no-repeat ...

    安卓浏览器看背景图片,有些设备会模糊

    • 解决方案:将背景图片放大为div的2X倍(一般为两倍),背景图尽量高清且大于目标div的尺寸
    /*原背景(div宽高都为100px)*/
    .div{
        background:url(../../XX.png) no-repeat center center;
        background-size: 100px 100px;display:inline-block;
    }
    /*兼容后的背景*/
    .div{
        background:url(../../XX.png) no-repeat center center;
        background-size: 200px 200px;display:inline-block;
    }
    /*或者*/
    .div{
        background:url(../../XX.png) no-repeat center center;
        background-size: contain;
    }

    图片加载很慢

    • 解决方案:1.使用Canvas绘制图片进行预加载;
      2.使用Lazy Load插件
    /*方案1*/
     /*  获取图片的base64码
            * @param {obj}img图片dom对象
             * */
            function getBase64Image(img) {
              let canvas = document.createElement("canvas");
              canvas.width = img.width;
              canvas.height = img.height;
              let ctx = canvas.getContext("2d");
              ctx.drawImage(img, 0, 0, img.width, img.height);  //绘制相同图片
              return canvas.toDataURL("image/png"); //转换成base64数据
            }
            <!--需要预加载的图片-->
        <save-img-base64>
          <img src="../../assets/1.png"/>
          <img src="../../assets/2.png"/>
          <img src="../../assets/3.png"/>
        </save-img-base64>
        
        
    /*方案2*/
    /*加载Lazy Load插件,其为jQuery的一个库因此也要加载jQuery插件*/
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>
    <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
    $("img.lazy").lazyload(threshold : 200);
    
    /*当用户禁用JavaScript时默认显示的图像
    <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
    <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
    <script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>
        

    手机中网页的放大和缩小

    • 解决方案:禁用用户的缩放功能
        <meta name="viewport" content="user-scalable=0"/>

    格式的自动识别

    • 解决方案:禁用自动识别页面中的格式
        <meta name="format-detection" content="telephone=no">

    移动端Gps定位

    • 解决方案:引用百度地图的api
        <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html {
                width: 100%;
                height: 100%;
                margin: 0;
                font-family: "微软雅黑";
                font-size: 14px;
            }
    
            #allmap {
                width: 100%;
                height: 500px;
            }
        </style>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></script>
        <title>获取当前所在地址,不显示地图</title>
    </head>
    <body>
        <!--<div id="allmap"></div>-->
        <!--不显示地图-->
        <div id="allmap" style="display:none"></div>
    </body>
    </html>
    <script type="text/javascript">
        $(function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, locationError);
            } else {
                alert("你的浏览器不支持 GeoLocation.");
            }
        });
    
        //定位成功时,执行的函数
        function showPosition(position) {
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.331398, 39.897445);
            map.centerAndZoom(point, 12);
            var geoc = new BMap.Geocoder();
    
            translateCallback = function (res) {
                alert(res.points.length);
                $.each(res.points, function (index, val) {
                    var point = val;
                    alert(point.lng + "," + point.lat);
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                    map.setCenter(point);
                    geoc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents;
                        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                        //var infoWindow = new BMap.InfoWindow(sContent);
                        //map.openInfoWindow(infoWindow, point);
                    });
                });
                
            }//(point);
            var convertor = new BMap.Convertor();
            var points = new Array();
            points.push(point);
            //translate(points: Array<BMap.Point>, from: number, to: number, callback: function)//callback返回是一个对象Object,TranslateResults类型
            //TranslateResults:status,points
            //参照:JavaScript API-服务类 Convertor TranslateResults http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b49
            //其中状态码可参照:WEB服务API-坐标转换API http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
            convertor.translate(points, 1, 5, translateCallback);
        }
    
        // 定位失败时,执行的函数
        function locationError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }
    </script>

    上下拉动滚动条时卡顿、慢

    body {
            -webkit-overflow-scrolling:touch;
            overflow-scrolling: touch;
    }

    是否允许用户复制文本

    Element {
            -webkit-user-select:none;
    
            -moz-user-select:none;
    
            -khtml-user-select:none;
    
            user-select:none;
    
     }

    长时间按住页面出现闪退

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

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

    Element{
    
            -webkit-appearance:none;
    
    }

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

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

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

    • 解决方案:js给 document 绑定 touchstart 或 touchend 事件
    document.addEventListener('touchstart',function(){},false);

    webkit mask 兼容处理

    if('WebkitMask'indocument.documentElement.style){
    
        /*支持*/
    
    }
    else{
    
        /*不支持*/
    
    }

    旋转屏幕时,字体大小自动调整的问题

    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
    
    -webkit-text-size-adjust:100%;
    
    }

    transition闪屏

    /设置内嵌的元素在3D 空间如何呈现:保留3D /
    
    -webkit-transform-style: preserve-3d;
    
    / 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /
    
    -webkit-backface-visibility:hidden;
    

    圆角bug

    background-clip: padding-box;

    h5网站input 设置为type=number的问题

    • 解决方案:解决max-length和部分手机样式问题
    functioncheckTextLength(obj, length) {
    
    if(obj.value.length > length)  {
    
    obj.value = obj.value.substr(0, length);
    
    }
    
    }
    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;
    
    }
    

    IOS移动端click事件300ms的延迟响应

    -解决方案:使用fastclick

    window.addEventListener( "load", function() {
    FastClick.attach( document.body );
    }, false );
    

    点击穿透问题

    • 解决方案:使用touch替代click,避免混用.

    h5底部输入框被键盘遮挡问题

    <script src="jquery.js" type="text/javascript"></script>
    var oHeight = $(document).height(); //浏览器当前的高度
       
       $(window).resize(function(){
     
            if($(document).height() < oHeight){
             
            $("#footer").css("position","static");
        }else{
             
            $("#footer").css("position","absolute");
        }
            
       });

    自动适应屏幕宽度

     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

    在pc端的基础上手动调节移动端的布局

    /*max-width:最大宽度以下的布局为..min-width:最小宽度以上的布局为: 具有覆盖效果*/
    @media (max-width: 720px)
    html {
    font-size: 62.5%;
    }

    参考文档
    https://www.cnblogs.com/mazhaokeng/p/8461260.html
    https://blog.csdn.net/dengboblog/article/details/53156570
    https://blog.csdn.net/diqi77/article/details/54692920
    https://www.cnblogs.com/zr123/p/8178740.html

    转载于:https://www.cnblogs.com/Lazy-Cat/p/9904006.html

    展开全文
  • 这些问题都是我实际开发中碰到的问题,我想把它们都记录下来,供自己他人学习。 1.JavaScript中的Date对象在Safari与IOS中的坑 var date =new Date("2018-07-25 19:25"); 这段代码是获得字符中指定的日期,它Fire...
  • 针对ios的刘海屏问题的解决: 一、设置网页在可视窗口的布局方式(重点是添加:viewport-fit=cover) <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, m
  • 1.h5移动端iOS内置浏览器Safari打开时,屏幕距离底部百分之十的部分是无法点击的,一点击就会出现工具栏,没有解决方案。 2.做第三方支付的时候,我们是用的ping++,走支付宝支付...安卓则能够正常返回。 转载于...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->...
  • 字体加粗 font-weight:bold;...透明度 transport 在ios中不生效 ,直接用 rgba(52, 52, 52, 0)–透明 代替 /系统默认菜单被禁用/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-hi...
  • 前端移动端适配总结

    万次阅读 多人点赞 2018-02-28 10:29:49
    meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码:&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;但是,很多小伙伴只是感性的...
  • vue做移动端适配最佳解决方案,亲测有效 转载今天也在写bug发布于2018-05-25 17:20:34阅读数 26760收藏 最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,...
  • 移动端苹果安卓适配

    2019-09-19 17:09:12
    常见苹果适配问题: 【问题1】:iPhone页面会自动把数字当成电话号码,点击后自动跳到电话拨号界面 方案: meta元标签常见苹果适配问题 【问题2】微信浏览器自动调整页面字体大小 方案:禁止微信浏览器调整页面字体...
  • unity使用webcam调用移动端摄像头适配安卓和ios 源码和安卓apk
  • (一)meta元标签 ...解决方案:禁止手机自动将网页中的电话号码显示为拨号的超链接 <meta name="format-detection" content="telephone=no"/> 二、微信浏览器自动调整页面字体大小 解决方案:禁止微信浏览器...
  • 移动端产品优劣对比 移动端产品包括小程序(本文...APP则是基于安卓和iOS手机操作系统开发的,能安装在智能手机上运行的的手机软件;App嵌入H5的混合开发,比如Reactnative,Vue.js,这会比完全Native开发成本大大降...
  • 根据网上找到的解决办法,对于安卓设备,把dpr=1改为当前设备的dpr if (!dpr &amp;&amp; !scale) { if (isIPhone) { // iOS下,对于23的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio &...
  • 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和ios上表现都不一样。 为了兼容Android和ios,很多人都煞费苦心,也包括我。 打开你做的H5,尤其...
  • 移动端开发基础之适配

    千次阅读 2017-01-11 11:44:20
    说到移动端适配,首先我们需要先搞清楚一些基础知识,所以本文路线是先了解像素,dpr,视口等基础知识,然后再整理出移动端适配方案。像素像素其实分为两种,分别是物理像素CSS像素物理像素(设备像素)物理像素,...
  • 移动端适配

    2020-08-26 23:51:54
    导读 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 ...本文将从移动端适配的基础概念出发,探究移动端适配各种问题的解决方案实现原理。 一、英寸
  • Vue 移动端适配解决方案

    千次阅读 2018-07-05 22:31:26
    Vue 移动端适配解决方案 1、动态设置 font-size 的 fontSize.js fontSize.js // 获取屏幕宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; // 获取html的dom元素 let...
1 2 3 4 5 ... 20
收藏数 8,119
精华内容 3,247
关键字:

移动端如何适配ios和安卓