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. Linux下运行Java项目时,出现No X11 DISPLAY variable was set, but this program performed an operation which requires it.的问题解决

    在~/.bashrc环境变量文件最下方加入: export DISPLAY=:0.0 然后,刷新环境变量以使其生效: source -/.bashrc 参考:http://stackoverflow. ...

  2. Linux防火墙iptables规则设置(转)

    iptables命令是Linux上常用的防火墙软件,是netfilter项目的一部分.可以直接配置,也可以通过许多前端和图形界面配置. 一.语法 iptables(选项)(参数) 二.选项 -t< ...

  3. HTML5 这些你全知道吗?

    今天心情烦躁,搭建个论坛各种失败,Laravel.React也学不进去,于是就复习复习学过的.记录一下很少用的东西. 代码摘抄于W3C菜鸟教程HTML5手册 # 定义文本方向 <element ...

  4. BIM

    BIM进入中国已经有十来个年头,随着对BIM概念的深入了解.当前国内BIM应用逐渐由三维模型的可视化应用升级为基于BIM模型的信息进行项目精细化动态管理. 传统粗放的项目管理方法是工程项目难以进行精细 ...

  5. 从机器码理解RIP 相对寻址

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载联系作者并保留声明头部与原文链接https://luzeshu.com/blog/rip-relative-addressing 本博客同步在 ...

  6. 手机加载优化 - 2x、3x图

    人们常说,现在的流量不值钱了,图越大越好咯! 我想说的是,浏览器虽然不值钱了,但速度还是略快吧! 文章来自:UI妹儿 icon_alipay.png→iPhone 1-3代的手机(已经不考虑了) ic ...

  7. onlyOffice 开发相关 总结

    onlyOffice 服务端 客户端 相关开发整理 功能: 所有客户端都可用 云端部署服务 查看 预览 doc ppt excel 编辑 权限控制 开发技术准备 用户服务器端 提供保存接口 用户浏览器 ...

  8. 【转载】回调函数(callback)是什么?

    一个很形象的例子: 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货.在这个例子里,你的电话号码就叫回 ...

  9. 解决编译twrp3.0.3遇到的问题

    1. 问题: ninja: error: '/home/jessie/OMNI/out/target/product/m1/obj/SHARED_LIBRARIES/libcryptfs_hw_int ...

  10. 关于CAShapeLayer

    关于CAShapeLayer 内容大纲: CAShapeLayer简介 贝塞尔曲线与CAShapeLayer的关系 strokeStart和strokeEnd 动画 用CAShapeLayer实现进度 ...