iphone在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了。

关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”,是根本没有这个功能。

iphone 的safari 浏览器实际上从一开始就完整显示了这个网页,然后用viewport 查看其中的一部分。

当你用手指拖动时,其实拖的不是页面,而是viewport。浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。

解决办法:

用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧?不过如果是一个div,然后设置height:200px;overflow:auto;的话,可以滚动但是完全没有那滑动效果,很郁闷吧?

我看到很多网站为了实现这一效果,用了第三方类库,最常用的是iscroll(包括新浪手机页,百度等)我一开始也使用,不过自从用了-webkit-overflow-scrolling: touch;样式后,就完全可以抛弃第三方类库了,

把它加在body{}区域,所有的overflow需要滚动的都可以生效了。

iphone 在设置了initial-scale=1 之后,在设置滚动条之后,没有滑动效果的解决办法的更多相关文章

  1. discuz论坛后台部分设置更改之后,清除了缓存网站前台不更新不生效的解决办法

    discuz论坛后台部分设置更改之后,清除了缓存但网站前台不更新不生效的解决办法 在config/config_global.php  把  $_config['memory']['eaccelera ...

  2. 转 sqlplus 设置回闪 sqlplus下使用退格backspace回删出现^H的解决办法

    转自 http://blog.csdn.net/chinadm123/article/details/44099351 1.进入sqlplus前设置回删 在进入sqlplus之前,在当前termina ...

  3. WInforn中设置ZedGraph的焦点显示坐标格式化以及显示三个坐标数的解决办法

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  4. Android 按下home键,程序在后台运行,在设置中点击程序的启动时,会再次打开启动页的解决办法

    在onCreate()方法中增加如下代码即可: if (!isTaskRoot()) {  finish();  return;  }

  5. Unity3D学习(七):Unity多重采样抗锯齿设置无效的解决办法

    前言 学习Shader的过程中发现模型锯齿严重,于是去Edit--Project Settings--Quality选项下将反锯齿设置为了8X Multi Sampling.结果没有任何改变,如图: ...

  6. Android ScrollView内部组件设置android:layout_height="fill_parent"无效的解决办法

    问题:scrollview内部组件都设置了android:layout_height="fill_parent"却没有效果. 解决办法:设置scrollview的fillViewp ...

  7. Fiddler设置代理后,iphone手机无法访问网络的全面解决办法

    好久不抓手机包,都有些忘记了,电脑上软件都在,原本是Fiddler4,现在已自动升级到V5. 入主题吧,首先Fiddler设置好代理,然后手机安装证书好了,设置手机代理,结果iphone无法访问网络, ...

  8. ios iphone ipad上iframe的宽度会扩大的解决办法

    这个问题,我从网上查了下,好像是属于ios的bug,android,windows都没有问题. 解决办法,就是在iframe加载完成后,设置 iframe里面body的宽度为多少PX. $(" ...

  9. [oldboy-django][2深入django]学生管理(Form)-- 编辑(设置input标签属性,设置input标签默认显示值,设置input的类型)

    1 django 后台实现设置input标签属性,设置input标签默认显示值,设置input输入框类型 # Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及sub ...

随机推荐

  1. Spring 详解(二)------- AOP关键概念以及两种实现方式

    目录 1. AOP 关键词 2. AOP 的作用 3. AOP 的通知类型 4. 基于 xml 的配置方式 5. 基于注解的配置方式 6. 切面的优先级 7. 重用切点表达式 8. 两种方式的比较(摘 ...

  2. Java抓屏程序代码

    原文:http://www.open-open.com/code/view/1422262655200 import java.awt.Dimension; import java.awt.Recta ...

  3. Maven学习在Elipse中发布一个Maven项目到Tomcat

    原文:http://www.cnblogs.com/quanyongan/archive/2013/04/26/3044618.html 对于maven初学者的我,经常遇到一个问题就是,maven项目 ...

  4. CSS3中transition-duration參数对hover前后两种过渡时间的影响

    transition-duration这个參数是设置过渡时间的,将transition-duration放在哪个类中.那么在这个类被启用时就会依照transition-duration设定的时间来过渡 ...

  5. Ubuntu 14.04安装搜狗拼音linux版应该注意的问题

    Ubuntu 14.04最终在万千期盼中来了,我也像其他的linux爱好者一样,删除了旧的12.04.開始体验下一个到来的LTS版本号. 我不想安装Ubuntu 麒麟版,我仅仅想原汁原味的Ubuntu ...

  6. java8 stream sorted

    1.对象类型配列 List<Person> list = Arrays.asList( new Person(22, "shaomch", "man" ...

  7. HDU 1242 rescue (优先队列模板题)

    Rescue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  8. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  9. WPF使用HierarchicalDataTemplate绑定Dictionary生成TreeView

    Dictionary中的<string, CustomeType>CustomeType是一个集合,将其绑定生成一棵树,树的第一层节点是Dictionary的Key,第二层是Custome ...

  10. 【2】按照Django官网,创建一个web app 创建app/创建相应的数据库表

    1. Creating app $ python manage.py startapp polls That'll create a directory polls, which is laid ou ...