踩过的坑—iphone手机H5样式兼容总结

对一个前端开发者来说,最煎熬的莫过于"兼容"两个字了(说到这个词朋友们是不是身体一抖),哪怕对于工作多年的老油条来讲,也不是完全了解各种场景下的兼容性处理方法.在这里我就把我在工作当中遇到的关于iphone手机h5页面的兼容性处理和大家分享一下. html,body{ -webkit-text-size-adjust: none; } // 当需要在中文版chrome浏览器中显示小于12px的字体时,而且此时页面放大效果会被阻止 html,body{ -webkit-tap-high…

iphone手机不同版本兼容、横竖屏

/* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ .dialog-agreement-con{ height: 45%; /* iphone4*/ } } @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-dev…

排坑·IPhone&IOS中不兼容正则中的断言匹配

禁用iPhone手机浏览器上给电话号码自动加上的link样式

iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给像是电话号码的数字加上link样式. 可以添加下面的meta禁用掉这个功能. // //…

禁用iPhone手机浏览器上给电话号码自动加上的link样式（苹果手机自动给手机号加样式）

原文地址:http://blog.csdn.net/atec2000/article/details/44631633 iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给像是电话号码的数字加上link样式. 可以添加下面的meta禁用掉这个功能. <meta name="format-detection" content="telephone=no">…

Dcloud开发webApp踩过的坑

Dcloud开发webApp踩过的坑一.总结一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系统等,业务能力如上传下载.二维码.地图.支付.语音输入.消息推送等.其实我只要把js拿到手,就可以很方便用在手机开发的网站上面了. 1.Dcloud可以做mobile web项目么? 可以,而且感觉会比浏览器多调用点api 但这就是一个普通的web项目,b/s方式,不可脱线运行,不能调用HTML5P…

微信支付之手机H5支付实践

最近项目中支付部分涉及到微信支付,使用的是h5支付,官方文档中是没有demo的,所以摸着石头过河,将踩过的坑记录如下. 一应用场景 H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付. 主要用于触屏版的手机浏览器请求微信支付的场景.可以方便的从外部浏览器唤起微信支付.有关于h5支付接口详细相关内容可以参考官方文档微信H5支付,本文主要记录实现代码及遇到的问题. 二服务商模式介绍服务商模式,适用于帮助其他商户接入微…

那些移动端web踩过的坑

原文链接:https://geniuspeng.github.io/2017/08/24/mobile-issues/ 扔了N久,还是捡回来了.好好弄一下吧.刚工作的时候挺忙的,后来不那么忙了,但是变懒了.这一年大多数时间都在在做移动端的东东,做了之后才发现,同样是web前端,移动端的坑真的是深不可测,各种各样的,只有想不到,没有遇不到.在这里把最近踩过的坑整理一下. No.1 大字体问题首先,要解决的关键问题是如何为设备选择可视视口尺寸,采用理想视口尺寸作为可视视口尺寸,代码也十分简单,只需…

那些年踩过的坑之:first-child伪类选择器

原文:那些年踩过的坑之:first-child伪类选择器 :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器.——w3school 嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解:误解一:认为E:first-child选中E元素的第一个子元素.误解二:认为E:first-child选中E元素的父元素的第一个E元素. 你是不是也曾这样理解这个选择器或者现在仍然这样理解?以上两种理解都是错误的,为了证明上面两种理解是错的,看看下面的实例 <!-…

iphone手机中对于html和css的一些特殊处理

1.iphone safari iso系统不兼容:hover的解决办法: 方法一: a:hover设置的样式在IOS系统的浏览器内显示不出来,看来是IOS系统的移动设备中,需要在按钮元素或者是body/html上绑定一个touchstart事件,才能激活:active状态. 代码如下: document.body.addEventListener('touchstart',function(){}); 或者给body添加ontouchstart事件: <body ontouchstart> 方…

使用vue开发项目需要注意的问题和可能踩到的坑

最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreate文档描述:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用.注意: 在这个钩子上,this变量还不能使用,data里的属性,methods方法里的方法,watcher中的事件都无法获得:2.created文档描述:在实例创建完成后被立即…

react + antd 实现打印功能（踩了不少坑）

最近在有网页打印需求,尝试了一下react的打印功能,遇到了不少的坑: 1.react本身有一些打印的组件,但都不好用,都是基于window.print(),但是window.print()如果直接打印的话,没有样式.处理直接当前网页的body设置为你要打印的区域,但是当你取消打印的时候你会发现整个网页都被你要打印的区域占满了,你还得用window.reload()重新加载一下页面,用户交互很不好,建议不要采用这种方式. 2.样式的问题,我们可以通过写内联样式解决,尝试了react的react-…

iphone手机safari浏览器访问网站滚动条不显示问题解决办法

近排有公司同事出差在外需使用OA系统,发现iphone手机safari浏览器在该出现滚动条的页面没有显示滚动条,导致无法正常使用. 系统前端页面是采用jeasyui搭建的框架,使用iframe变更主页.于是,在iframe外层包一层div,添加样式:style="-webkit-overflow-scrolling:touch;overflow:auto;". it works!…

vuejs监听苹果iphone手机键盘事件

在iphone手机中,vue提供的keyup事件是不能监听iphone键盘的,但是h5提供的input事件可以做到. 只需要向下面这样处理,就可以解决iphone不响应键盘事件的bug <template> <input type="text" v-model="search" @keyup="get" @input="input" ref="input"> </templat…

使用pace监控ajax踩过的坑

使用vue.js开发移动端的活动页面时,有时候会出现因为请求的数据没有返回而使得当前活动页结构混乱或者不美观,这个时候可以考虑使用pace.js,通过设置参数值,在ajax全部请求结束之前显示loading图或其他样式,用户体验会上升很多. 那么如何设置才能等监听完所有的ajax请求结束之后才显示渲染好的页面呢?具体请参考pace.js http://github.hubspot.com/pace/docs/welcome/ window.paceOptions = { ajax: true…

那些年提交AppStore审核踩过的坑

此文刚刚上了CocoaChina的首页:那些年提交AppStore审核踩过的坑欢迎围观,谢谢大家支持. //add by 云峰小罗,2016.08.04 做iOS开发近5年了,每次提交版本时不可谓不小心翼翼,如履薄冰,但是还是难免踩到了一些坑.苹果的官方文档(AppStore审核条款)这里就不罗列了,太冗长繁琐了,而且大部分是一般app都不会触碰的到的,今天我主要想以自己的亲身经历,跟大家回顾一下这些年我提交AppStore审核时踩过的坑,并且针对如何避免给出一些tips供大家参考.大神请忽…

小程序——微信小程序初学踩过的坑

微信小程序初学踩过的坑一.前言最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上的HTML+CSS+JS来进行开发和呈现,其中HTML主要是负责静态内容的表示,通过DOM树状结构来维护,CSS主要是对这些描述对象的一种解释,提取出来可以复用,JS则是实现试视图和逻辑的交互,通过用户等各种动作来执行相应的操作,而微信就高度的使用了这些东西,分别变成了WXML,WXSS,JS,知道…

iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

apicloud地图、即时通讯、人脸识别登录、以及平时踩过得坑

apicloud技术浅谈导语 apicloud 的学习也有一段时间了,这是我个人的一些经验,和踩过的坑,希望对大家能有一些帮助. apicloud的知识准备 apicloud 是一个用原生的思想搭建包含window.frame.widget 的框架,内容用html.css去布局,js进行数据交互;所以首先要熟悉web三件套,html+css+js;因为是移动端,建议大家采用rem布局或者是flex布局进行屏幕适应. css布局(简单介绍rem和flex) rem是根据html的font-siz…

（踩过的坑）使用Github Page搭建个人博客

最近需要搭建一个网站,作为导航网址,但是自己的域名备案还要等上几天,就想着有没有别的办法来搭建一个公网可以访问的网站. Github Page的话是一个github个人主页,完全适合用来搭建普通网站. 之前注册github的时候就很恼火,响应一个网页需要等上几分钟.还有浏览器验证并不是都支持的.(这里推荐手机上下载火狐浏览器,手机上去注册) 今天去dns解析网站解析了githu.com,在host文件夹(C:windows/system32/drivers/etc/host)下面添加了域名,访问…

video 在iphone手机的ios系统和微信端无法自动播放

描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话,还会自动放大到全屏模式网上的解决方案: 1. <script src="https://act.mcake.com/fangli/2018/wap/commonjs/jquery.min.js"></script> <script type="t…

System.Net邮件发送功能踩过的坑

System.Net邮件发送功能踩过的坑目录 System.Net邮件发送功能踩过的坑 1.EazyEmail邮件发送类库 2.邮件发送授权码与邮件密码 3.通过邮件密码来发送邮件 4.Wireshark抓包分析 5.通过密码SSL发送成功 5.1 微软不支持在465的ssl 5.2 ssl证书 1.EazyEmail邮件发送类库 Net 类库自带了邮件发送功能.笔者对该类库,从使用的角度进行了二次封装,nuget上可搜索EazyEmail,注入容器时通过委托来获得邮箱服务器的配置地址以及发送…

springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）

springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于 MIT协议,允许自由使用和修改代码. 效果如图: 01 首先去官网下载ueditor包官方网址:http://fex.b…

项目中踩过的坑之-sessionStorage

总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面,然后新页面在初始化时候使用这个id,发送请求········. 解决方案: 第一个小伙伴选择了cookie,总所周知cookie可以在同源网页间共享.我建议他不要用,因为cookie在页面发送请求的时候都需要一同发送的,浪费带宽不好. 然后我骄傲的建议了他使用sessionStorage或者loc…

web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为重要. 本文将讲述两种使用富文本编辑器的思路, 重点讲述弹出式形态的实现思路, 以及中间踩过的坑. 基础: 文章的编辑采用ueditor作为富文本编辑器, 而前框的框架则使用bootstrap, 下文的解决方案都是基于此的. ueditor的相关博文: • ueditor和springmvc的集成…

iPhone手机安全指南

摘要:iPhone手机安全指南 - 1.iPhone解锁使用指纹:2.启用“查找我的iPhone”功能:3.Apple ID启用两步验证:4.修改SIM卡PIN码.5.iPhone被盗或丢失后,登录iCloud启用“丢失模式”,挂失SIM卡,将该手机从Apple ID两步验证受信列表中移除. iPhone是市场上价格较高的一款手机,因此也成为很多小偷眼中的首选目标,那么iPhone在丢失或被盗后该怎么办?作为iPhone用户,我们在日常生活中要注意防止手机被盗的同时,也要学会一些技巧,在iPho…

ios/iphone手机请求微信用户头像错位BUG及解决方法

转:http://www.jslover.com/code/527.html ios/iphone手机请求微信用户头像错位BUG及解决方法发布时间:2014-12-01 16:37:01 评论数:0 分类:code 最近我们的平台上线了几个游戏,iphone同学特别是iphone6 plus测试发现,频繁出错头像错乱的现象,即列表中,个别人的头像被“互换”了.这个很难解释是如何造成,总之就是当微信遇上iphone6擦出的火花.... 写了一组测试用例子,可以很容易重现这个BUG: http…

手机H5 web调试利器——WEINRE (WEb INspector REmote)

手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的chrome://inspect/#devices 安卓真机调试,不过这个要求比较高: 首先,你的 Chrome 版本必须高于 32 其次你的测试机 Android 系统高于 4.0, 再其次,测试机安装 Chrome for Android 才可以使用 Chrome 远程调试这项功能, 最后, 手机需…

"开发路上踩过的坑要一个个填起来————持续更新······（7月30日）"

欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢迎指出! 欢迎交流! 3.scss和css的区别在使用github pages的jekylltheme时,发现有一个scss文件,略感好奇.查了一下,scss文件是css预处理器所产生的中间文件,可通过编译产生css文件.简单说起来就是,程序员觉得CSS只能一行一行的手动添加实在是太麻烦.于是大家…

【转载】Fragment 全解析（1）：那些年踩过的坑

http://www.jianshu.com/p/d9143a92ad94 Fragment系列文章:1.Fragment全解析系列(一):那些年踩过的坑2.Fragment全解析系列(二):正确的使用姿势3.Fragment之我的解决方案:Fragmentation 本篇主要介绍一些最常见的Fragment的坑以及官方Fragment库的那些自身的BUG,这些BUG在你深度使用时会遇到,比如Fragment嵌套时或者单Activity+多Fragment架构时遇到的坑.如果想看较为实用的技巧,…

【踩过的坑—iphone手机H5样式兼容总结】的更多相关文章