• 最近在研究小程序,写了一个简单的展示页面。在微信开发者工具上面调试一切正常,在真机上面测试的时候问题就来了。...小程序android上获取不到接口数据,后台安全域名已设置,服务器tls1.2 也支持。报错: re

    最近在研究小程序,写了一个简单的展示页面。在微信开发者工具上面调试一切正常,在真机上面测试的时候问题就来了。

    在ios 上面 布局出现混乱,查找原因是因为display:flex;标签和属性的部分问题,在android 真机测试 是没有问题的。原因未果。于是换掉了flex布局 完美兼容。。。

    小程序在android上获取不到接口数据,后台安全域名已设置,服务器tls1.2 也支持。报错: repuest:fail ssl hand shake error   怀疑是证书缺少造成的。但是ios 的数据显示正常。   小程序在android上面经常会出现 未知问题,暂时解决资料也不全,所以就换个方式吧,解决不了就绕过去吧!

    铭记。。。

    展开全文
  • 在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空DIV控制间距。 2.fixed定位问题 整个页面的fixed定位,在ios下下拉会触发下拉事件,但是...

    1.margin在IOS中失效
    在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空DIV控制间距。
    2.fixed定位问题
    整个页面的fixed定位,在ios下下拉会触发下拉事件,但是没有动画效果。Android就能正常运行
    flex中使用 绝对定位,ios出现严重错位,导致父级元素也会变成绝对定位,Android能达到理想效果
    总而言之 尽量不用fixed
    3.absolute定位问题
    ①使用absolute定位,并且宽带设置了100% 并且设置了padding就会导致屏幕宽度溢出,出现页面左右可以移动的bug,模拟器上是没有问题,但是真机上是有这个问题的。这个问题让我调试并痛苦了许久
    ②使用absolute并且当前元素是flex容器这种情况在Ios下面布局不会起到左右,会出现所有元素转换成了absloute并且文字错位
    ③总而言之 尽量不用 absolute
    4. word-spacing在button中的问题
    有时候在使用大按钮的时候两个字中间希望有段间距,但是目前没有找到能使用的占位符,所以使用了的word-spacing加空格 这个方法来设置文字的间距,但是在iPhone6s 上两个字中间一个空格的时候整体会向右偏,必须设置两个空格。
    5.相同代码存在效果差异
    在真机测试或者模拟器测试,总汇出现各种样式上的差异,造成原因比较多,因为不同的手机呈现的效果或者它本身采用的技术均存在差异,最终呈现的效果有时候就会出现较大的差别。但是这些差别一般都是在可以接受的范围。

    展开全文
  • 近来一个朋友问:手写一个日历,为什么在安卓能遍历显示,而苹果里却不显示,你遇到过遍历不出的bug吗? 首先解决下上述问题,我总结下我印象深刻的几个坑~ 1.回答下最开始的那个问题,手写一个日历,为什么在...

    近来一个朋友问:手写一个日历,为什么在安卓能遍历显示,而苹果里却不显示,你遇到过遍历不出的bug吗?

    首先解决下上述问题,我总结下我印象深刻的几个坑~

    1.回答下最开始的那个问题,手写一个日历,为什么在安卓能遍历显示,而苹果里却不显示?

    首先确定这并不是遍历的bug,肯定是兼容性问题,遍历这是最基本的语法,问题肯定出在遍历的数据处理阶段,看了代码果不其然,结论就是:ios 系统的问题,比如newDate(“2018-08-08”),在ios会出现NaN的情况,ios只支持newDate(“2018/08/08”)

    2.video 视频格式m3u8,在ios里边儿不能播放,但是安卓能正常播放?

    分析

    官方给的例子,是mp4格式的文件,ios可以播放,微信小程序开发者平台的论坛也有类似的问题,但是没有准确的答案,我开始考虑转换下格式,奈何,技术不够,尝试添加在image 标签 添加 custom-cache={{cache}} ,data 中添加 cache:false问题解决了。

    解决
        <video src="{{sbDress}}" controls   custom-cache="{{cache}}"></video>

    3.微信小程序WxParse 包含图片安卓端无法加载

    分析

    wxparse 是微信小程序用于解析富文本编辑器生成代码的插件,用于展示一般的图文。在安卓手机端如果内容包含图片的标签时整个内容都无法加载出来,在手机端查看console,发现安卓机在console.dir()的时候报错,这是由于安卓机不支持console.dir()的语法。

    结论:

    这是安卓机不支持console.dir()的语法,使用console.log()代替。

    4.安卓上图片会出现卡顿,变形,然后才会显示正常的图片大小

    分析

    开发文档里写明:注:image组件默认宽度300px、高度225px,开发时所有image的小图标都使用了mode=”widthFixed”,只设置了宽度,让高度自适应,就会出现图片加载时初始化高度位225px,加载完毕才显示mode的高度,由于安卓机这个卡顿教明显,才会出现瞬时的变形。

    结论

    今后使用image 标签,尽量固定宽高。

    5.navigationBar 在安卓机中位置为左边,在苹果中居中显示,那么标题字数多了之后苹果就会默认使用…代替剩余的文字

    分析

    这个也不是bug,只不过时显示问题,目前版本6.6.0里支持在window属性里设置navigationStyle由默认样式修改为custom,支持自定义样式。所谓的自定义样式,就是默认导航,只剩一个胶囊的导航。

    结论

    app.json里边儿设置window{“navitionStyle”:”custom”},后要自己使用在wxml,and wxss里写样式显示头部的导航栏。

    注意

    由于该属性是微信6.6.0才支持,所以需要将其他的window属性照常写,来兼容低版本。

    展开全文
  • 在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空DIV控制间距。  2.fixed定位问题  整个页面的fixed定位,在ios下下拉会触发下拉事件,...

    1.margin在IOS中失效 
    在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空DIV控制间距。 
    2.fixed定位问题 
    整个页面的fixed定位,在ios下下拉会触发下拉事件,但是没有动画效果。Android就能正常运行 
    flex中使用 绝对定位,ios出现严重错位,导致父级元素也会变成绝对定位,Android能达到理想效果 
    总而言之 == 解决问题 诱导 : https://developers.weixin.qq.com/community/develop/doc/000e8a5b09c4a09559e67aae65b800?highLine=%25E6%25A0%25B7%25E5%25BC%258F%25E5%2585%25BC%25E5%25AE%25B9
    3.absolute定位问题 
    ①使用absolute定位,并且宽带设置了100% 并且设置了padding就会导致屏幕宽度溢出,出现页面左右可以移动的bug,模拟器上是没有问题,但是真机上是有这个问题的。这个问题让我调试并痛苦了许久 
    ②使用absolute并且当前元素是flex容器这种情况在Ios下面布局不会起到左右,会出现所有元素转换成了absloute并且文字错位 
    ③总而言之 尽量不用 absolute 
    4. word-spacing在button中的问题 
    有时候在使用大按钮的时候两个字中间希望有段间距,但是目前没有找到能使用的占位符,所以使用了的word-spacing加空格 这个方法来设置文字的间距,但是在iPhone6s 上两个字中间一个空格的时候整体会向右偏,必须设置两个空格。 
    5.相同代码存在效果差异 
    6.不同机型显示有差异 

    展开全文
  • position属性带来的浮动问题: 项目案例: 网宿流量微信公众号活动红包抽奖页面;...Android设备存在此问题,而iOS设备显示正常 原因分析: css属性中对容器的样式中提到,子元素定位方式为absolute或者fix

    position属性带来的浮动问题:

    项目案例:

    网宿流量微信公众号活动红包抽奖页面;

    问题描述:

    在input被获取焦点时,屏幕上position属性值为absolute的元素,包含input,会被弹出的虚拟键盘顶起,导致显示样式异常

    设备:

    Android设备存在此问题,而iOS设备显示正常

    原因分析:

    css属性中对容器的样式中提到,子元素定位方式为absolute或者fixed,若父容器没有添加属性position:relative;则当前元素的定位坐标是相对于body元素的(大部分情况下也可描述为当前窗口可见范围)。问提的出现是android的虚拟键盘显示机制,占用了一部分的屏幕资源,是的分配给浏览器的屏幕资源高度缩小,position为absolute和fixed的元素在父容器没有定义position:relative的情况下,因为浏览器窗体可见范围的缩小,定位响应发生改变,所以出现“被顶起”的情况。

    解决方案:

    在分析中提到,父级容器与子元素的关系,所以在父级容器中定义容器高度,并设定position属性的值为relative即可解决此问题。

    展开全文
  • 布局尽量不要用padding,使用flex布局。
  • 本文出自: ...使用的是 filter drop-shadow 如果你只想兼容 Chrome 那么请看: http://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ 如果你想兼容ios Android 小程序,那么.tian-word {
  • 需要给页面的最外层view添加样式. 比如,定义css .container 如下 .container { width: 100%; overflow: hidden; } 然后给每个页面的最外层view添加 class=‘container’ ...
  • 但是background-attachment对IOS用户不友好,我们可以这样来,先在WXML设置一个盒子,用来存放背景图片,然后样式设置固定定位宽高100%。 代码如下: .bg{ width: 100%; height: 100%; position: fixe...
  • html: <view class="foods"> <view class="eat"> <view>早上吃什么<text></text></view>: 洗衣粉 </view> <view class="eat"> <......
  • 同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容 上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radiusoverflow:hidden做成圆形,子元素如果使用了...
  • 今天遇到,在小程序里textarea会存在一定的兼容性问题,textarea有默认的内边距,在安卓和ios显示的时候,ios边距会比安卓的大很多。 解决办法: 通过 wx.getSystemInfoSync()获取手机的机型;然后判断是ios还是...
  • 单页面的微信小程序ios手机上,会出现能左右滑动一定距离的问题。解决办法就两行代码: 设置外层元素的css为 width:100%; overflow-x:hidden;
  • 在实际开发中,很多时候,苹果手机对小程序不够友好,类似上图,在实现小程序列表左滑效果的时候,安卓手机上测试都很正常,也很流畅,但是在苹果手机上却会出现这样的bug,滑动的时候,列表不但可以左滑,还可以...
  • 1.效果图 2.样式设置: .label { min-width: 136rpx; text-align-last: justify; text-align: justify; text-justify: inter-ideograph;...
  • 记录下在微信小程序中遇到的一些兼容性问题,iOS兼容性 1.iOS中input的placeholder属性字体不居中 对placeholder设置line-height及font-size 对input设置高度 2.iOS中滚动卡顿 设置-webkit-overflow-scrolling:...
  • 稍微笔记记录: ios8 对于 微信小程序的 transform 是不支持的,必须写成兼容模式 -webkit-transform
  • 小程序CSS常用动画示例 一、前言 正如android的四大动画一样: translate:移动 alpha:透明度变化 rotate:旋转 scale:尺寸变化 css也可以实现 二、CSS3的2D转换 2dtransform的方法: 我们能够对元素进行移动...
  • 在实际开发中,很多时候,苹果手机对小程序不够友好,类似上图,在实现小程序列表左滑效果的时候,安卓手机上测试都很正常,也很流畅,但是在苹果手机上却会出现这样的bug,滑动的时候,列表不但可以左滑,还可以...
  • 这是本人在开发过程中遇到的一个问题,问题不大,倒是很头疼,下面给出解决答案: 本人亲测问题是因为页面超出,最简单的方法就是给超出页面各种大模块背景色或者边框线,加完之后一眼就能看出到底是哪个模块超出...
1 2 3 4 5 ... 20
收藏数 17,891
精华内容 7,156
关键字:

小程序ios和安卓css