文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动开发实用

以下是历史原因，来源其他人的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放 (double tap to...zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速 双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态...什么是Retina 显示屏，带来了什么问题 retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4...另外，有些机型去除不了，如小米2 对于按钮类还有个办法，不使用a或者input标签，直接用div标签 参考《如何去除android上a标签产生的边框》 winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉...4.x bug 三星 Galaxy S4中自带浏览器不支持border-radius缩写 同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分 部分手机(如三星)，a链接支持鼠标

6.5K30

移动web开发需要注意的二十点

1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone...的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码（部分设备可能支持不是很好）； 2、HTML5标签的使用 在开始编写webapp...比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。...7、学会使用webkit-box 上一条，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？

1.9K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    WEBAPP开发技巧总结

    web一样，维护比较简单，它其实就是一个站点 Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术...在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发 Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解...比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。...7、学会使用webkit-box 上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？

    2K20

    2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

    ; } 如果要去除全部的，就把 element去掉 同时这个属性可让在 div里的滚动如丝般顺滑： -webkit-overflow-scrolling : touch; 4.去除 button...另外一种情况（一般在页面内容很少时 iphone5及以上常发生），当输入框弹出时 fixed元素挤到输入框上，当输入框消失时， fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在...CSS权重： style是 1000， id是 100， class是 10，普通如 li、 div和伪类是 1，通用如 *是 0；  17.使用 rem时，设某个 div比如的 height:3rem...-webkit-backdrop-filter: saturate(180%) blur(20px); background: rgba(0,0,0,0.5); 这个效果暂时只有 IOS9上的 safari...`，具体请看[这里][5] 3.有些版本的 iphone4中， audio和 video默认播放事件不会触发，比如使用 window.onload或计时器等都不能触发播放，必须用 JS写事件让用户手动点击触发才会开始播放

    3.7K40

    移动端web开发笔记

    如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。...以下是历史原因： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，...另外，有些机型去除不了，如小米2 对于按钮类还有个办法，不使用a或者input标签，直接用div标签 8、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 的滚动条，所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动； Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果...bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址： iDangero 17、 移动端禁止选中内容 如果你不想用户可以选中页面中的内容

    3.7K20

    移动端吸顶fixbar解决方案

    iPhone 4s&5 / iOS 6&7 / Safari 下，页面底部footer输入框失去焦点时，header定位出错。当页面有滚动动作时，header定位恢复正常。...iPhone 4 / iOS 5 / Safari下，当页面发生跳转，再退回时，fixed区域消失，当内容获得焦点时，fixed区域才显示。...部分低版本Android对支持不好，video poster属性设置的封面图会遮挡fixed元素。 QQ、UC浏览器滚动页面时footer定位错误，会往上偏移，是由于地址栏收起的缘故。...在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。...安卓 滚动距离超过某位置时，js动态设置样式；为了防止惯性滚动引起的fix不及时的情况，在 touchstart、 touchmove 、 touchend 事件都进行监听。

    3K30

    收藏 | 移动端H5开发常用技巧总结

    目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。...「解决方案」 在滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置 overflow 设置外部 overflow...ontouchend onclick audio 和 video 在 ios 和 andriod 中自动播放 这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，...手指按住屏幕上拉，底部多出一块白色区域。 在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。...解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll div class='warper'> div class='

    4.2K20

    吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

    -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /*...当手指从触摸屏上移开，滚动会立即停止 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper {...页面放大或缩小不确定性行为 表现 双击或者双指张开手指页面元素，页面会放大或缩小。 产生原因 HTML 本身会产生放大或缩小的行为，比如在 PC 浏览器上，可以自由控制页面的放大缩小。...对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。对于非矩形显示器（如圆形表盘，iPhoneX 屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。...关于移动端 H5 的文章告一段落了，之后实践中遇到的问题都将在此文中更新。另外准备做一个移动端 H5 开源项目。多关注下 我的github动态哦！

    2.1K20

    【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

    产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。 ?...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling...页面放大或缩小不确定性行为 表现 双击或者双指张开手指页面元素，页面会放大或缩小。 产生原因 HTML 本身会产生放大或缩小的行为，比如在 PC 浏览器上，可以自由控制页面的放大缩小。...对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。对于非矩形显示器（如圆形表盘，iPhoneX 屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。...关于移动端 H5 的文章告一段落了，之后实践中遇到的问题都将在此文中更新。另外准备做一个移动端 H5 开源项目。多关注下 我的github动态哦！

    1.4K22

    第123天：移动web开发中的常见问题

    touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event``preventDefault()可以阻止默认情况的发生：阻止页面滚动。...MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action:none;}可以阻止默认情况的发生：阻止页面滚动。...retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。...9、如何在移动端禁止用户选中内容？...如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉： .user-select-none { -webkit-user-select: none; /* Chrome all / Safari

    1.5K20

    12个关于移动 H5 开发的采坑问题汇总

    产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /*...当手指从触摸屏上移开，滚动会立即停止 */ 复制代码 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper...对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。对于非矩形显示器（如圆形表盘，iPhoneX 屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。...关于移动端 H5 的文章告一段落了，之后实践中遇到的问题都将在此文中更新。另外准备做一个移动端 H5 开源项目。多关注下 我的github[5]动态哦！

    1.7K31

    移动端H5页面开发坑点指南

    ＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,...属性在IOS及Android上无法使用,在PC端正常 2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间 问题4:Safari...: touch; overflow-x:auto在iOS有兼容问题，解决方法: .scroll-box { /* 模态框之类的div不能放在这个容器中,否则关闭模态框有时候关闭不了 */ height...:纠错 关于iOS与OS X端字体的优化(横竖屏会出现字体加粗不一致等)问题 iOS浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决iOS上的问题,但桌面版Safari...onclick=""就好了,如: ios中location.href跳转页面空白 在location.href外套一层setTimeout就解决了！

    3.1K10

    移动端爬坑记 --- （1）布局与样式上的奇葩偶遇

    ', 'chrome >= 34', 'safari >= 7', 'opera >= 23', 'ios >= 7', 'android >= 2.3', 'bb >= 10'...IOS滚动窗滑动到底部还能弹窗拖拉的奇葩修复 这个方案是通过计算离底部多远加状态来阻止touch事件 // 防止内容区域滚到底后引起页面整体的滚动 var content = document.querySelector...0; -webkit-appearance: none; } 旋转屏幕时，字体大小调整的问题 html, body, form, fieldset, p, div, h1, h2,...: none; } IOS禁止保存或拷贝图像 img { -webkit-touch-callout: none; } IOS中input键盘事件调用缓慢 直接改为监听input...在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-

    12710

    吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

    产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /*...当手指从触摸屏上移开，滚动会立即停止 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper {...对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。对于非矩形显示器（如圆形表盘，iPhoneX 屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。...关于移动端 H5 的文章告一段落了，之后实践中遇到的问题都将在此文中更新。另外准备做一个移动端 H5 开源项目。多关注下 我的github动态哦！

    1.3K30

    浏览器内核（理解）

    渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。...内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。 ...（3） webkit(Safari) 　　Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。 　　...代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器， （4） Chromium/Bink(chrome...目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 　　 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit， 　　Android 4.4

    2.9K30

    中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

    提及的安卓系统包括Android和基于Android开发的系统 提及的苹果系统包括iOS和iPadOS 本文针对的开发场景是移动端浏览器，因此大部分坑位的解决方案在桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用...每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。...首先明确解决滑动穿透需保持哪些交互行为，那就是除了弹窗内容能点击或滚动，其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点，全部解决方案都能禁止的滚动行为却引发其他问题。...弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 当打开弹窗时给声明position:fixed;left:0;width:100%并动态声明top。

    4.4K22

    记录工作中遇到的各种问题（Bug，总结，记录）

    word文档中复制带换行的内容到编辑器中会有乱码，如 ? 调试找到了解决办法，改了源码，给作者提了个pr就好了 ? 31. requirejs可以使用urlArgs参数自定义文件是否缓存 ?...在PC上和模拟器上内容是垂直居中的，但在真机上内容却偏上了一丢丢  在华为小米中发现过 49....的safari与Mac的safari进行远程调试时，MAC的iOS系统不能比iPhone的低，否则无法连接上，即“开发”菜单栏下的看不到连接的iPhone信息 58. iPhone或iPad的safari...pdfPath" width="100%" height="100%" type="application/pdf" /> 在Mac上的safari是能嵌入的，不过在iPhone或iPad下失效，但是能直接通过链接打开...iPhone或iPad的safari浏览器通过嵌入pdf来预览时，只能看到第一页，无法滚动翻页查看更多 这个问题是ios自家的bug了，所以为了解决，只能引入第三方支持（不再使用浏览器自身支持的

    18.2K12
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券