我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般会使用的方法是一个position:fixed;的div,在里面放一个input,浮动在顶部或底部,其他的内容可以滚动. 这种方法在安卓设备中肯定是没问题的.但是在ios设备中就会有问题了. 问题1:滚动页面内容部分时,浮动部分可能会消失,滚动结束后才展示出来 问题2:点击输入框进行输入时,呼出键盘…

<div style="position: fixed"></div> <div style="height: 100%; overflow: auto;"></div> <div  style="position: fixed"></div> 主要思想是分为上.中.下三层,中间层为主要内容层,上下层是浮动的DIV,分别浮动在顶部和底部,也可根据自身需要修改position属…

我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好的前端应用,在Android设备上正常工作,但是在iOS平板上测试却发现问题(相当广大前端开发者都曾经遇到过类似问题).顺手就想调试一下找到原因.那么一个前端应用运行在iOS设备上,程序员如何在安装了Windows系统的笔记本上进行调试呢? 假设我的前端应用是这个url:https://jerryl…

原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨. 对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略.  通过一些研究发现,只要设置两个CSS属性,以及加上一个元素,这个问题就解决了. Here we go!(译者注…

原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨. 对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略.  通过一些研究发现,只要设置两个CSS属性,以及加上一个元素,这个问题就解决了. Here we go!(译者注:…

转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari 前端开发调试 iOS 完美解决方案   收藏    我要投稿 在日趋现代化的 Web 网络中,各种现代浏览器和移动终端设备的用户百分比越来越高.对于我们 Web 前端开发者来说,运行 iOS Safari 浏览器的苹果移动设备对我们来说更是不容忽视的.然而当我们需要对前端页面进行测试调试时,桌面版…

* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: Arial, Helvetica, sans-serif;margin: 0;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !importan…

今天在iOS设备上安装天翼云存储app,在safari上直接打开http://cloud.189.cn/wap/index.jsp,点击“点击免费安装”,如下图: 神奇的事情发生了,设备上直接下载app然后安装了,不需要经过app stroe.安装完后第一次点击app打开,会提示“是否打开distribution”之类的.去app store搜索一番,发现没有“天翼云存储”这个app. 这一下可被震惊了,可能孤陋寡闻,ios的app还可以用这种方式来安装,那以后可不方便了? 好奇心来了,研究了一…

今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on('input paste', function() { /*省略*/ });…

当我开始开发自己的iOS游戏时,我会考虑的第一件事便是如何将其导出到设备中,如此有效地测试我的游戏.最初,该过程看似很长且复杂,我所遇到的主要问题是,尽管存在许多资源,但是它们并非完全来自同样的地方,所以我不得不通过各种教程将其组合并匹配在一起.所以我决定通过本文一步步地总结这一过程.这是我到目前为止所遵循的一些方式;希望这也能够带给处于同样开发阶段的人更多帮助.   1.获得unity和iOS导出器 如果你还未这么做,你首先需要在官网下载最新版本的Unity.已经出现了2个版本,分别是免费版(…

本文转载至  http://mobile.51cto.com/hot-439095.htm 通过itms-services协议,可以通过safari浏览器直接在iOS设备上安装应用程序.利用这种方式,只要在内网布置一个服务器,测试人员只需要通过测试设备的safari浏览器访问特定的url既可以实现安装,然后测试了. AD:WOT2015 互联网运维与开发者大会 热销抢票 通过itms-services协议,可以通过safari浏览器直接在iOS设备上安装应用程序.利用这种方式,只要在内网布置一个…

原文:https://blog.csdn.net/xhaimail/article/details/90440029 最近在工作上遇到一个奇葩问题,在Android和Windows平台上做请求时参数都可以正常传递和接收,但在IOS设备上后台死活接收不到值. 原因是:可能是由于 IOS 用的请求序列与java所有的序列不同,所以通过以POST提交数据后台是收不到参数 解决办法:本人是把PSOT的请求方式换成GET的方式就可以提交数据了. 在IOS设备上POST提交form表单,后台接收不到值怎么办…

在设备上进行安装 在 Google Android 设备上安装应用程序 在 Apple iOS 设备上安装应用程序 在 Google Android 设备上安装应用程序 在项目的开发.测试和部署阶段,可以将应用程序直接安装在设备上. 您可以使用 Flash Builder 直接在 Android 设备上安装应用程序.当您在未安装 Adobe AIR 的设备上安装包时,Flash Builder 会自动安装 Adobe AIR. Adobe 建议 有要分享的教程?   文章和视频教程:对 Goog…

微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片…

iOS设备上出现的点击事件失效,但是在Android上可以正常使用, 1.iOS设备对标签点击限制,不认为是可点击的标签,需要给要绑定点击事件的标签加上一个样式,cursor:pointer:这样就可以点击了 2.查看js版本,与点击事件的绑定方法是否对应…

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见  http://code.ciaoca.com/javascript/exif-js/ 这里主要用到Orientation属性. Orientation属性说明如下: 旋转角度 参数 0° 1 顺时针90° 6 逆时针9…

一.前言 最近同事问到一个问题,一个前端页面在IOS端真机测试下出现一个比较诡异的问题,如果没有遇到过估计也是一筹莫展.今天特此记录一下,或许能帮到后面遇到这个问题的朋友少绕一些弯路.这是关于JQuery 中的 delegate 和 on 给动态元素绑定事件触发不了的问题.文章以下只用 delegate 举例. 二.JQuery 的 delegate 作用. 首先我们来了解一下 Delegate 的作用.一句话带过:"给动态添加的元素绑定事件" 看图: 下面九个测试按钮是通过点击上面的…

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 这里主要利用exif.js读取照片的拍摄信息. Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向.相机设备型号.拍摄时间.ISO 感光度.GPS 地理位置等数据. EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC…

语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascript,当然iOS还可以用RubyMotion,前端还能用GWT/CoffieScript,但不是主流,用的人很少,真正用了也会多出很多麻烦. 这两者有个有意思的对比:变量/方法命名的风格正好相反.苹果一直鼓吹用户体验,写代码也不例外,程序命名都是用英文全称并且要多详细有多详细,力求看变量和方法名就能知…

1.日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种类型的时间. `let date = new Date('2019-02-28 18:33:24'); // null` 解决方案是,转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了 replace(/\-/g, "/") 2.键盘收起,页面卡住,不回落 ios12上,发现键…

一般是用这个委类:active 参考:http://www.w3school.com.cn/cssref/selector_active.asp 但是业界上实现的效果中,今日头条的手机端网页却不是这样的,当点击时是一闪而过,也有非常漂亮的圆角,如下图: 初步分析,没有在css文件上找到active的样式,我初步怀疑是用js添加上去的:且这个有个特点:点击时是一闪1秒,而用active是一直都在,除非你放开. 最终还是没研究出,只能用土办法,直接active去实现. 接下来是发现在iOS微信上无法…

环境:IOS6~7 Safari 问题:iOS设备屏幕切换时可能会造成屏幕变大,出现左右间距等问题 解决方法: 头部加入<meta name = "viewport" content = "width = 1080”>…

现在很多开发者的Web应用程序的设计样式和交互类似本机应用程序,例如,它的缩放比例适合iOS上的整个屏幕.当用户将其添加到主屏幕时,您可以通过使其看起来像本机应用程序一样,在iOS上为您的Web应用程序定制Safari.您可以使用其他平台忽略的iOS设置来执行此操作. 例如,您可以为添加到iOS主屏幕时用于表示Web应用程序的图标指定图标,如指定Web Clip的网页图标所述.当您的Web应用程序从主屏幕启动时,您还可以最小化iOS用户界面上的Safari,如更改状态栏外观和隐藏Safari用户…

window.deviceId = '{{$deviceId}}'; window.iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false; if( iOS ){ iOSversion = ( !!window.history && !!window.history.pushState ? '4+' : '4-' ); if( !!window.matchMedia ){ iOSversion = '5+'…

andriod系统显示蓝色的按钮,正常:ios设备显示灰色的按钮,不正常. style属性添加-webkit-appearance: none;…

事件背景: 最近在做一个移动端业务的时候碰到一个bug,在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效. 思考: 暂借助jquery展示下事件绑定代码,将所有标签含有data-tip属性的元素通过事件代理至body $('body').on('click','[data-tip]',function(e){ console.log($(this.).attr('data-tip')) }) 这样做在android和pc上都可以正常实现,但是在ios上面对部分标签尽然不…

不能跳转的情况需要 在ionic项目根目录下,打开config.xml文件,在<access origin="*" />后添加<allow-navigation href="*" />即可 针对跳转到appstore的情况把跳转的URL改变下,参考如下链接地址 http://blog.csdn.net/qq_22103321/article/details/65936271…

原因: safari的webkit内核特性 解决方案: 在iframe外包裹一层div并另外设置其css属性为如下: -webkit-overflow-scrolling:touch; overflow:auto;…

译者:jmouse 大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟. 1.不要太纠结于此 是否能接受这 300ms 的时间延迟,往往取决于你的应用和目标受众,比如:如果是个内容为主,并且菜单较少的应用,那么用户在阅读上花费的事件远远大于在菜单上消耗的事件,这种 情况下 300ms 是完全可以接受的,并且没有 300ms 延迟的体验并不会好很多.分析你的应用判断是否需要解决这个不…

2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 $(document).on('touchstart', function(e){ var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; }); 2.我们常用:hover,:focus,:active…