一.解决iphonX白条,网站扩展到整个屏幕 网页在iphoneX的浏览器屏幕显示上,默认情况下在头部的2侧会出现白条背景,网站被限制在了一个“安全区域”内,移除白色背景的方法 方法一:设置body的背景色: .body{ background-color:#f00; } 方法二:添加mate属性viewport-fit=cover <meta name="viewport" content="width=device-width, initial-scale=1.0,

1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样式 */ } .column-half { /* 占列宽的一半 */ } .row { /* 一般行的样式 */ } 另一种做法: .thing, .other-thing, .third-thing, .fourth-thing { /* 这里共用的样式 */ } 命名规范是高质量代码的重要组成部

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上,发现键

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

var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), isAndroid = ua.match(/(Android)\s+([\d.]+)/), isMobile = isIphone || isAndroid; //判断 if(isMobile){ //执行是移动端时的代码 }else

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

CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这里 非常棒的一篇文章,爱死我了,tks Adam! 关于CSS media queries想了解更多,参看这里 如何使用Media Queries媒体查询: 媒体查询就像是一个CSS选择器或者如果你接触过数据库的话,就像是SQL查询语句.媒体查询实际上就是一种语法规 则,可以方便的从一大堆元素里获取

平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具.但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有developer Tool,只能傻傻的用alert来输出一些调试信息,修改了CSS样式也必须不断的刷新,文件多了有时候还得经常清缓存,效率极其低下.神啊,救救我吧! 于是weinre出现了!它是一个基于nodejs的工具.可以把远程的页面运行情况映射到本地,在本地的浏览器中查看调试信息,修改的css样式

现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Dojo 1.7中,新的touch API可以帮助您简化这一步骤. 本文是Touching and Gesturing on the iPhone的更新版,该文最早发布于2008年 引言在我们讨论Dojo 1.7中那些帮助创建可触摸界面的新功能之前,先来了解下底层的技术.概念.Apple在发布iPhon

很久没有更新博客了,由于自己的水平一般,能力有限,这种情况下的知识点可能过于薄弱,所以不好分享给大家,注意是怕误导大家了,最近学习移动端的东西,有点心得,分享给大家,希望对大家有所帮助,如果有什么地方说的不对的地方,万望不吝赐教,批评指正,谢谢了! 好了,开场白就不多说了,下面我们进入正题吧(有点猴急): iPhone设备的实际显示尺寸: 今天要讲的主题是关于iPhone的尺寸问题和在微信上iPhone的尺寸表现,能力有限,就讲这一个知识点(这里说的iPhone指的是iPhone手机,不用我多强

原文链接: 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!(译者注:

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

在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320px×480px的分辨率去访问我们前面的布局示例,却无法得到我们想看到的结果,并不是从上到下排列显示,而是和计算机显示器访问的布局相同.为什么会这样?因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的,因为很多网页是按照800px左右标准制作的,所以Safari浏览器默认按照980px的宽度进行显示,就可以正常显示绝大

DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标准中,已经不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位.通过使用div盒子模型结构将各部分内容划分到不同的区块,然后用css来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,div用于搭建网站结构(框架).css用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获

优化移动设备上SharePoint 2013网站 本文由SPFarmer翻译自Waldek Mastykarz的文章 移动市场在持续的增长.在不远的将来,使用移动设备浏览站点将会超过电脑.为了保证用户友好的体验,我们必须优化站点,以便在不同的设备上展示. SharePoint 2013 提供了一系列的选项来优化在移动设备上訪问面向公众的站点.依据你的实际情况,你能够选择一个或者一系列组合的选项. 年,使用移动设备訪问站点会超过电脑.移动设备有不同的尺寸和功能. 由于电脑的体验对于移动用户来说并不

一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”.“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性. 此准则是针对我个人的,可能没有什么适用性,也可能会对您的学习有所启发,所以这里还是简单分享下.其中“无宽度”准则则在去年秋天专门讲了下,文章名是“页面重构鑫三无准则之无宽度准则”,这里再简单介绍下其中的“无图片”

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

在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同而有种种兼容性问题. 下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试.这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器来调试.当然,我目前只发现这么两种手段,如果你还有其他方法可调试更多的浏览器,

这就引出一个问题,我们在对iPhone设备适配时候,又多出几种情况.iPhone系列设备媒体查询: @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) { //针对iPhone 4, 5c,5s, 所有iPhone6的放大模式,个别iPhone6

网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.既然我们已经在真机上运行过App了,那么现在就来生成一下.--------------------------------------------------------------- 1.在虚拟机下,点一下桌面(星空图随便某个地方),在Finder中选择'前往','应用程序'. 2.找到'iTunes',双击运行.