滚动条在Iphone和safari浏览器中不可见 - 腾讯云开发者社区

文章/答案/技术大牛

发布

谷歌支付苹果数十亿，让其成为iPhone和Mac产品Safari浏览器默认搜索引擎

在2014年，谷歌曾向苹果支付了10亿美元。高盛估计，在去年这笔交易费用可能高达95亿美元。策划&撰写：温暖为了让自家搜索引擎成为苹果产品Safari浏览器的默认搜索引擎，谷歌也是拼了。...今日最新消息，外媒CNBC报道称谷歌和苹果两家公司在进行了长达4个月之久的谈判后，最终达成了协议，即谷歌将向苹果支付数十亿美元换取谷歌搜索在iPhone和Mac上Safari浏览器中默认搜索引擎的地位。...苹果前总法律顾问布鲁斯·休厄尔在近期接受哥伦比亚大学法律系学生采访时，曝光了苹果和谷歌两家公司达成搜索协议的细节。...他说：“我们和谷歌就搜索业务进行了谈判用了四个月的时间，我几乎每天都要与谷歌首席执行官桑达尔·皮查伊和总法律顾问肯特·沃克会面协商。”...要知道苹果Safari是仅次于谷歌Chrome的第二大受欢迎浏览器，因此在该浏览器上内置谷歌搜索引擎对于谷歌本身而言意义巨大。

5662 0

关于拖拽功能在IE11 、Firefox和Safari中不兼容的问题

） 3是firefox在拖动的时候会打开一个新窗口（firbox） 4是ie11不支持onclick属性方法； ie11 里元素对象的attributes的排序和其他浏览器不同, ie11 中...remove()方法不work (ie) 对于原因1的解决方案其中IE11 压根就不支持path属性，firefox和Safari还勉强通过hack的方式获取到path，获取方式如下： const...对于原因2的解决方案 IE11， firefox 都有dataTransfer.setData的问题， Safari没有可以不用管。...中attributes的属性排序和其他浏览器不同，会引起bug。...解决这个问题，我是通过遍历attributes 找到符合我要的代替之前的写死的attributes顺序针对ie11 remove()不work的情况，可以用代码 parent.removeChild

4.6K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

在 Web 浏览器中，视口是整个文档的可见部分。如果文档大于视口，则用户可以通过滚动来移动视口。...●在浏览器中，我们可以通过滚动条来移动视口以看到更多网页内容。更形象的视口解释： ?...同理，当浏览器窗口比较小，而我们想要看到页面下面的内容时，我们需要向下滚动滚动条，浏览器在实现这个的过程中所依赖的，便是视口的下移。...为了解决上述固定 viewport 宽度的方案所引发的各种问题，Apple 在 iOS Safari 中首先引入了Viewport Meta Tag ，允许 Web 开发人员定制视口的大小和缩放比例，后续其他的移动浏览器厂商也都支持了此标记...4.2 viewport 属性举例在本小节，我们以iPhone6s手机+Safari浏览器举例，对上述属性做详细说明。如未做特殊说明，均只讨论竖屏模式。

4.2K3 0

彻底搞懂移动Web开发中的viewport与跨屏适配

4.6K2 0

移动端页面按手机屏幕分辨率自动缩放的js

试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如...：safari iphone：980px; opera:850px; Andriod webkit:800px; IE:974px; 然后会把这个980px虚拟窗口装进宽度为750px的iphone6中...，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条，而且字迹明显变小的原因。...+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+' 这段代码切记要指定 initial-scale=***，在安卓系统中...，不指定默认的nitial-scale=***，只指定最小和最大缩放值，也可以正常显示，但是safari浏览器则会失效，对于宽度是100%的页面，则显示为页面的30%左右的宽。

6.5K8 0

移动Web学习笔记

-webkit-text-size-adjust: 100% 解释：在 Chrome 浏览器中只能设置大于或等于 12px 的字体大小，当设置了小于 12px 的字体大小时，浏览器按照 12px 的字体大小渲染字体...-webkit-tap-highlight-color: transparent 解释：这个属性只用于iOS (iPhone和iPad)。...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式... 解释：在UC浏览器中强制使用全屏显示网页 23.... 解释：iphone的私有标签，它用于给iphone上的safari

1.9K3 0

WEBAPP开发技巧总结

当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用 HTML5和CSS3技术做UI布局。...设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码...16、iOS中如何获取滚动条的值桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari

3.3K2 0

pc 和 ipad 端网站适配

= null;// 微信内部浏览器 ENV.inSafari = userAgent.indexOf('Safari') !...'orientationchange' : 'resize', recalc = function () { //clientWidth: 获取对象可见内容的宽度，不包括滚动条...chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。...没问题 360极速浏览器没问题搜狗浏览器没问题 chrome 内核 2345 浏览器 IE 内核没问题 QQ 浏览器 IE 内核 UC 浏览器 webkit 内核，谷歌内核 IE 不兼容 es6...ie9中使用flex布局针对IE浏览器的CSS样式（兼容性） IE浏览器样式兼容解决办法 http://www.webdevout.net/css-hacks var ms_ie = false;

3.4K3 0

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

设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码...从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator...16、iOS中如何获取滚动条的值桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari

2.8K2 0

移动端web开发笔记

5、移动端手机号码识别（IOS）在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7位数字，形如：1234567 带括号及加号的数字...在IOS safari下，大概为300毫秒。这就是延迟的由来。...body元素的滚动条，所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动； Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果...，不过随后这个特性又被移除； iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做： .xxx { overflow...元素在ios和andriod中无法自动播放应对方案：触屏即播 $('html').one('touchstart',function(){ audio.play() }) 23、摇一摇功能 HTML5

4.8K2 0

纯滚动怎么理解_scrollview不滚动

scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分　　[注意]IE7-浏览器返回值是不准确的　　【1】没有滚动条时，scrollHeight与clientHeight...，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性　　[注意]scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight...但是由于各个浏览器表现不一样，分为以下几种情况　　【1】html元素没有滚动条时，IE和firefox的client和scroll属性始终相同，且返回可视区的尺寸大小；而safari和chrome表现正常...可以反映和控制页面的滚动；但是chrome和safari浏览器是通过document.body.scrollTop和scrollLeft来控制的 ...如果当前元素在视口中可见，这个方法什么也不做　　如果将可选的alignCenter参数设置为true，则表示尽量将元素显示在视口中部(垂直方向) 　　[注意]该方法只有chrome和safari支持

2.9K2 0

jquery 与javascript 获取元素尺寸大小的对比

outerWidth() 方法返回元素的宽度（包括内边距和边框）。 outerHeight() 方法返回元素的高度（包括内边距和边框）。...js获取尺寸的方法 clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...Window 尺寸有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。...对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth...包含上面的浏览器地址等所有上面的部分) screen.availHeight - 可用的屏幕高度(不包含下面的任务栏，包含上面的浏览器地址等所有上面的部分) screen.height-屏幕高度（包含整个屏幕

2.5K3 0

移动端开发需要注意事项

设备中的safari私有meta标签，它表示：允许全屏模式浏览第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码...因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大 3.自适应布局模式在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。...为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik...用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式

7202 0

js获取网页屏幕可视区域高度

document.documentElement.clientHeight ==> 可见区域高度看了以上代码，可能会有疑问说body和可见区域到底有什么不同呢，我们在console里运行一下会发现在不同的网页中有不同的情况值...原因就是：在浏览器默认的情况下，body有8-10px左右的边距，而可见区域包括了这个边距，因此如果我们用到body{padding:0;margin:0;}来消除这种默认的情况。...以下是兼容主流浏览器（IE/Firefox/Chrome/Safari）获取浏览器窗口可视区域（不包括滚动条）和滚动条位置的代码： ? ?...return document.documentElement.clientHeight || document.body.clientHeight; 9 } 10 11 // 获取浏览器窗口水平滚动条的位置...{ 13 return document.documentElement.scrollLeft || document.body.scrollLeft; 14 } 15 16 // 获取浏览器窗口垂直滚动条的位置

11.1K1 0

移动端H5坑位指南

唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。...这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。往返缓存指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称BFCache。...在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。...自动播放媒体常见媒体元素包括音频和视频，为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay。

4.2K1 0

浏览器滚动条的自定义和隐藏

---- 我们在处理业务的时候，偶尔会因为某些非抵抗力因素，需要对浏览器的滚动条进行处理，以提升产品的体验。...本文我们来谈谈关于浏览器滚动条的自定义和隐藏自定义滚动条首先，我们来认识滚动条的那些选择器。...对于 webkit 内核的浏览器，滚动条有以下的选择器：名称用途 scrollbar 滚动条 - 占据指定的宽高 scrollbar-track 滚动条的轨道 scrollbar-corner 滚动条的底角...scrollbar-button 滚动条的上下按钮 mac 上俺试了没效果，读者可以在 window 上尝试下 scrollbar-thumb 滚动条上的滑块 scrollbar-track-piece...*/ } .div3 { overflow-x: hidden; /* 隐藏 x 轴，即水平滚动条 */ } 但是，这个方法有一个劣势：所在的容器是不可滚动了，但是超出的部分不可见。

3K3 0

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

提及的安卓系统包括Android和基于Android开发的系统提及的苹果系统包括iOS和iPadOS 本文针对的开发场景是移动端浏览器，因此大部分坑位的解决方案在桌面端浏览器里不一定有效解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。...这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。「往返缓存」指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称BFCache。...在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。...自动播放媒体常见媒体元素包括音频和视频，为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay。

5K2 2

safari对100vh的兼容问题

需求：在以下的布局要求下，利用flex布局来实现，但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度很自然的利用100vh来控制最外层的高度，但测试过程中，发现safari浏览器中，页面的高度出现了偏差...，比屏幕的高度还要高出一部分，出现了双层滚动条。...经研究，发现safari的100vh是包含地址栏和功能列的，而其它浏览器100vh才是用户浏览器真正的可见区域(见下图) 解决方案通过innerHeight重新定义一个变量代替vh safariHacks...) { document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px'); }); } 在mounted...内调用该方法 height: 100vh; /*給 Safari 以外的瀏覽器讀取*/ height: calc(var(--vh, 1vh) * 100); 注意–vh要写在100vh下面。。。

2.4K2 0

移动前端开发之viewport的深入理解

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素...meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。...根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale...比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。...总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说

1.3K5 0

jQuery实现图片懒加载

2.懒加载的原理页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。...，说白了就是浏览器不兼容。...在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。...网页可见区域高[仅针对body]： document.body.clientHeight 网页可见区域宽[仅针对body]： document.body.offsetWidth (包括滚动条和边框，若滚动条和边框为...0，则和clientWidth相等) 网页可见区域高[仅针对body]： document.body.offsetHeight (包括滚动条和边框，若滚动条和边框为0，则和clientHeight相等)

15.5K2 0

点击加载更多

谷歌支付苹果数十亿，让其成为iPhone和Mac产品Safari浏览器默认搜索引擎

关于拖拽功能在IE11 、Firefox和Safari中不兼容的问题

【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

彻底搞懂移动Web开发中的viewport与跨屏适配

移动端页面按手机屏幕分辨率自动缩放的js

移动Web学习笔记

WEBAPP开发技巧总结

pc 和 ipad 端网站适配

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

移动端web开发笔记

纯滚动怎么理解_scrollview不滚动

jquery 与javascript 获取元素尺寸大小的对比

移动端开发需要注意事项

js获取网页屏幕可视区域高度

移动端H5坑位指南

浏览器滚动条的自定义和隐藏

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

safari对100vh的兼容问题

移动前端开发之viewport的深入理解

jQuery实现图片懒加载

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐