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. 【Vue 学习系列 - 01】- 环境搭建(Win7)

    1. 根据系统下载Node.js 下载地址:http://nodejs.cn/download 2. 安装Node.js 点击安装Node.js,在安装目录D:\Program Files\nodej ...

  2. MySQL安装总是失败,提示缺少Visual Studio 2013 Redistributable

    MySQL安装总是失败,提示缺少Visual Studio 2013 Redistributable,但是很疑惑,我明明已经安装了呀,原来问题出在版本上,以下提供了一个可以匹配新版本mysql的版本: ...

  3. 当 外部 input 值的改变,获取 当前 input type="hidden" 的值

    1.如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? 方法 ...

  4. android 文件读取(assets)

    assets文件夹资源的访问        assets文件夹里面的文件都是保持原始的文件格式,需要用AssetManager以字节流的形式读取文件.       1. 先在Activity里面调用g ...

  5. 互斥锁和条件变量(pthread)相关函数

    互斥锁 #include <pthread.h> // 若成功返回0,出错返回正的Exxx值 // mptr通常被初始化为PTHREAD_MUTEX_INITIALIZER int pth ...

  6. 性能问题案例02——sybase连接堵塞问题

    现象:近期现场反馈一个问题.系统在审批的时候,常常卡死.整个系统全然用不了,浏览器訪问处于loading的状态. 排查: 1.一般系统挂了首先想到内存问题,可是现象是loading,也就是说没有挂,线 ...

  7. snip_进制转换代码段

    10进制转成16进制. /* 程序:10进制转16进制的C语言实现 描述: 关键: 获得余 获得整 整为零 则退出 */ #include<stdio.h> #define N 10 #d ...

  8. 文件管理中心iOS版简介

    App Store地址:https://itunes.apple.com/cn/app/id1023365565?mt=8 文件管理中心-装机必备的文件管家,专业的rar-zip 解压工具,局域网看片 ...

  9. java8--面向对象 下(疯狂java讲义3) 复习笔记

    1.如果一个包装类和一个基本类型比较大小,或者是两个基本类型进行比较大小,直接用==就好: 如果是两个包装类进行比较大小,那么使用equals(),返回值是true,false,或者使用Xxx.com ...

  10. MapReduce算法形式一:WordCount

    MapReduce算法形式一:WordCount 这种形式可以做一些网站登陆次数,或者某个电商网站的商品销量啊诸如此类的,主要就是求和,但是求和之前还是要好好清洗数据的,以免数据缺省值太多,影响真实性 ...