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. sklearn 特征选择

    1.移除低方差的特征(Removing features with low variance) VarianceThreshold 是特征选择中的一项基本方法.它会移除所有方差不满足阈值的特征.默认设 ...

  2. jdk与jre安装之后的名字

    jdk与jre安装之后的名字 jdk与jre的区别:https://blog.csdn.net/qq_33642117/article/details/52143824 jdk安装之后的名字: Jav ...

  3. 将世界坐标转成NGUI坐标

    将世界坐标转成NGUI坐标,这个中间须要一个屏幕坐标,可參考例如以下代码: /// <summary> /// 将世界坐标转成UI坐标 /// </summary> /// & ...

  4. [LightOJ 1018]Brush (IV)[状压DP]

    题目链接:http://lightoj.com/volume_showproblem.php? problem=1018 题意分析:平面上有不超过N个点,如今能够随意方向划直线将它们划去,问:最少要划 ...

  5. ArcGIS 10.3 for Server新特性介绍

    ArcGIS10.3的正式版立即在美国Esri全球用户大会推出.中国的正式发行时间预计在Esri中国的用户大会.以下就将用户比較关心的ArcGIS 10.3 for Server的新特性给大家进行简单 ...

  6. 使用JWT设计SpringBoot项目api接口安全服务

    转载直: 使用JWT设计SpringBoot项目api接口安全服务

  7. 简单的shell脚本编写

    http://www.cnblogs.com/wuyuegb2312/p/3399566.html

  8. 关于java赋值操作的原子性问题

    17.7. Non-Atomic Treatment of double and long For the purposes of the Java programming language memo ...

  9. virtualbox创建centos7虚拟机

    安装Virtualbox 下载安装: 直接到官网上下载,https://www.virtualbox.org/wiki/Downloads 然后一键傻瓜式的安装即可. 设置默认虚拟电脑位置: 管理=& ...

  10. 有关 安装MySQL的错误

    1.登录SQLyog 密码与MySQL设置不一致. 2.上一次安装MySQL没有卸载干净,(排查删除: (1)搜索C盘删除相关文件(隐藏目录   C:\ProgramData  下寻找 mysql ) ...