2019-07-30 15:09:16 weixin_39327883 阅读数 212
  • 跟宁哥学Flutter跨平台开发(Android和iOS App)

    本课程主要介绍Dart,以及Flutter的核心知识。主语包括Dart语言的基本语法、循环、条件、函数、类、异常、以及其他高级特性。Flutter主要用于开发跨平台Android App和iOS App。主要包括Flutter的安装,Flutter布局,常用组件、Android和iOS风格的组件、手势、图像、网络、数据库等核心操作。

    575 人正在学习 去看看 李宁

首先声明,总结不易,转载请标明出处,谢谢

1、new Date获取时间戳

在安卓机上new Date('2019-9-10')可以成功获取时间戳,ios无法获取

处理方法: 将字符串中-替换成/,.replace(/\-/g,'');

2、点击复制功能

安卓和ios是不同的实现方式,详见我之前的一篇博客

https://blog.csdn.net/weixin_39327883/article/details/89207116

3、input获取焦点

安卓获取焦点弹起键盘后再失去焦点,页面成功复原

ios失去焦点后页面无法回滚和复原,需要手动重置一下scrolltop

4、input边框背景问题

安卓和ios将背景和边框设为透明兼容性写法

兼容写法:background:transparent; FILTER:alpha(opacity=0);border:none;

5、input选择图片

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

安卓如果要支持相册和拍照需要有capture属性

ios需要将capture属性去掉(removeAttribute)

6、video标签

由于微信浏览器安卓和ios的内核不同,安卓为x5内核,ios为chrome内核,导致video视频在安卓播放时会强制全屏并且在最高层级,所以我自己的处理方法是视频暂停时先将video标签隐藏,显示出页面其他元素。

 

文章持续更新中......

2017-12-14 12:31:37 qq_39198420 阅读数 2492
  • 跟宁哥学Flutter跨平台开发(Android和iOS App)

    本课程主要介绍Dart,以及Flutter的核心知识。主语包括Dart语言的基本语法、循环、条件、函数、类、异常、以及其他高级特性。Flutter主要用于开发跨平台Android App和iOS App。主要包括Flutter的安装,Flutter布局,常用组件、Android和iOS风格的组件、手势、图像、网络、数据库等核心操作。

    575 人正在学习 去看看 李宁

移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现。但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题。如图:



如何解决:
查阅资料之后想到一下几种解决方法
1,使用position:absolute模拟

    <script type="text/javascript">

        window.onscroll=function(){

        $(".fixed").css("top",$(window).scrollTop());

       $(".foot").css("top",$(window).scrollTop()+$(window).height());

    }

    </script>

问题来了:滑动页面时头部底部div会有明显的抖动。
2,判断当前获得焦点元素是input则隐藏div改为position:absolute

    <body onload=setInterval("a()",500)>
    <script type="text/javascript">

      function a(){

        if(document.activeElement.tagName == 'INPUT'){    

          $(".fixed").css({'position': 'absolute','top':'0'}); 

           } else {  

             $(".fixed").css('position', 'fixed');  

            }

          }

      </script>

问题来了:不停监控dom,消耗资源。如果input个数较少,可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。
3,插件iscroll.js个人感觉不是很好用。可能方法不对,jQuery Mobile 没尝试,感觉会增负担。
4,重点来了:
只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果,无需插件。可拷贝下面代码运行。
但是,当点击手机输入法的向下箭头时还会有问题。
5.完美的解决办法

var windowInnerHeight= window.innerHeight; //获取当前浏览器窗口高度

$(window).resize(function(){

if(window.innerHeight < windowInnerHeight){
 $('.footer').css('position','static');//当内部高度变小时
}else{

$('.footer').css('position','absolute');

}
      });

当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部,底部。顿时感觉开朗了

2018-12-11 10:04:33 weixin_42283360 阅读数 1227
  • 跟宁哥学Flutter跨平台开发(Android和iOS App)

    本课程主要介绍Dart,以及Flutter的核心知识。主语包括Dart语言的基本语法、循环、条件、函数、类、异常、以及其他高级特性。Flutter主要用于开发跨平台Android App和iOS App。主要包括Flutter的安装,Flutter布局,常用组件、Android和iOS风格的组件、手势、图像、网络、数据库等核心操作。

    575 人正在学习 去看看 李宁

一、h1/h2/h3/h4/h5/h6标签样式

Android: 有加粗字号加大的效果
iOS: 没有以上效果
解决办法: 在基础样式中, 如下设置

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: normal;
  font-size: 100%;
}

二、Date.parse(日期格式)

参考这个博客比较好: https://blog.csdn.net/zlingyun/article/details/81010572
Android: 2018-12-11 2018/12/11
iOS: 2018/12/11
解决办法: 使用2018/12/11 这样的日期格式, 完美~
案例:

	iOS Date.parse()不识别'2018-12-11',所以这个函数不起正确的作用, 后来改成'2018/12/11', 才起正确的作用 
function contrastTime(evalue, num) {
	console.log(evalue)
	var dB = new Date(evalue.replace(/[\.]/g,'/')); //获取当前选择日期  
	var d = new Date();
	var str = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate(); //获取当前实际日期  
	// alert(Date.parse(str) + "," + Date.parse(dB) + "," + num );
	if (Date.parse(str) > Date.parse(dB)) { //时间戳对比  
		// alert(Date.parse(str) + "," + Date.parse(dB) + "," + num );
		return 0;
	}
	return 1;
}

三、flex布局

Android: 支持
iOS: 记不清几不支持了, 总之用的时候, 写上兼容性的样式才好, 加上-webkit等, 具体的, 百度吧. 或者有时间我再整理

四、倒计时

Android: 都行
iOS: js后台运行的时间比较短, 如果用定时器写倒计时, 会不准确. 建议用时间戳写倒计时.

function sendMessage() {
	var sendtime;
	var num = 60;
	var beginTime = new Date().getTime(); // 记录及时开始的时间
	//倒计时
	if ($(this).attr('class').indexOf('send-act') > -1) { //如果类名中有send-act,结束函数
		return false
	}
	$(this).html('60秒后重发')
	$(this).addClass('send-act')
	clearInterval(sendtime)
	sendtime = setInterval(function () {
		// num--
		var newTime = new Date().getTime(); // 拿到此刻当下的时间
		var dTime = (newTime - beginTime) / 1000; // 还剩下的时间
		dTime = parseInt(dTime);
		num = 60 - dTime > 0 ? 60 - dTime : 0
		if (num > 0) {
			$('.log-send').html((num >= 10 ? num : '0' + num) + '秒后重发')
		} else {
			$('.log-send').html('重新发送')
			$('.log-send').removeClass('send-act')
			clearInterval(sendtime)
		}
	}, 1000)
}

五、html中元素高度用%, ios中无效

项目的整体有左右padding, 我给了4.5%, 结果ios中没有了, 改成15px, 应该就好了~

2017-06-07 14:26:12 T_tan 阅读数 586
  • 跟宁哥学Flutter跨平台开发(Android和iOS App)

    本课程主要介绍Dart,以及Flutter的核心知识。主语包括Dart语言的基本语法、循环、条件、函数、类、异常、以及其他高级特性。Flutter主要用于开发跨平台Android App和iOS App。主要包括Flutter的安装,Flutter布局,常用组件、Android和iOS风格的组件、手势、图像、网络、数据库等核心操作。

    575 人正在学习 去看看 李宁

在钉钉端的页面使用了swiper.js 滑动效果

在安卓端应用按钮点击正常

IOS点击发生偏移

解决方案

/*解决兼容IOS点击*/
*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
/*最后在统一给个点击个点击样式*/
.con a:active{background: url('../img/summer_icons-11.png');}

-webkit的意思是:IOS浏览器;
-tap的意思是:点击;
-highlight的意思是:背景高亮;
-color的意思是:颜色
rgba(0,0,0,0) = transparent这两个是一个意思,就是纯黑透明;





2018-06-01 16:51:06 ZhushiKezhang 阅读数 3636
  • 跟宁哥学Flutter跨平台开发(Android和iOS App)

    本课程主要介绍Dart,以及Flutter的核心知识。主语包括Dart语言的基本语法、循环、条件、函数、类、异常、以及其他高级特性。Flutter主要用于开发跨平台Android App和iOS App。主要包括Flutter的安装,Flutter布局,常用组件、Android和iOS风格的组件、手势、图像、网络、数据库等核心操作。

    575 人正在学习 去看看 李宁

问题1:iphoneX适配方法。

首先了解一下iphoneX设备基础信息,如下:

iphoneX屏幕组成:上部齐刘海(44px)+ 安全区域(safe area)+ 底部手势区域(34px)。

默认,页面只显示在“安全区域”中,导致屏幕顶部和底部看起来很别扭,此时可以通过如下几种方式进行适配:

1):设置viewport-fit

viewport-fit可以取两个值contain(默认)或 cover

viewport-fit=contain:页面内容显示在安全区域;

viewport-fit=cover:页面内容显示在整个屏幕

通常需要设置 viewport-fit=cover,如下:

 

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


2):媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){    //这里写需要调整的样式
}

3):当设置viewport-fit=cover时,如下四个值需要设置,页面才会显示在安全区域中,设置如下:

    body { 

        padding-top: constant(safe-area-inset-top);  //为导航栏+状态栏总高度(88px)

        padding-left: constant(safe-area-inset-left);    //如果未竖屏时,为0  

        padding-right: constant(safe-area-inset-right);   //如果未竖屏时,为0  

        padding-bottom: constant(safe-area-inset-bottom);   //为底部圆弧高度(34px)

    }

问题2:使用 $(window).resize(...) 无效。

可能由于框架或插件原因,有时候$(window).resize(...)不生效。

解决方案:使用 window.onresize = function () {...} 即可。

问题3:gif动图附近会闪烁

问题描述:有些手机上,gif动图图片附近会有闪烁现象;

经测试发现,手机卡顿越严重,闪烁越明显,所以基本确定是由于手机卡顿造成的;

解决办法:进可能减少gif动图帧数量,或直接忽略这些卡顿的手机(通常是比较老的机型/系统)。

问题3:ios手机页面里可滚动内容滚动不流畅

问题描述:ios手机上,网页中可滚动区域滚动不流畅,手指滑动多少页面就只滚动多少,没有弹性效果

解决办法:-webkit-overflow-scrolling : touch;

加上上面这段代码即可。

没有更多推荐了,返回首页