奇怪的行为宽度 Safari (iOS) 内部/外部宽度/高度 - 腾讯云开发者社区

文章/答案/技术大牛

发布

三. CSS layout（布局）

）行内元素的默认宽度和高度都是被内容撑开的大小由width 和 height两个属性来设置: width 设置内容区的宽度 height 设置内容区的高度边框（border）边框（border），边框属于盒子边缘，边框里边属于盒子内部...: #bfa; /* 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部,边框的大小会影响到整个盒子的大小要设置边框...行内元素的盒模型：行内元素不支持设置宽度和高度(宽度高度由内容决定) 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局行内元素可以设置border，垂直方向的border...默认值，宽度和高度用来设置内容区的大小 - border-box 宽度和高度用来设置整个盒子可见框的大小 width 和 height 指的是内容区和内边距和边框的总大小

2.7K4 0

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

Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。...唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。...-- 设置Safari全屏，在iOS7+无效 --> <!...-webkit-overflow-scrolling: touch; } .elem { overflow: auto; } 禁止滚动传播与桌面端浏览器不一样，移动端浏览器有一个奇怪行为...这种行为称为「滚动传播」。若不想产生这种奇怪行为可直接禁止。

5.1K2 2

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

是的

没有找到

iOS 9对前端做了什么？

看字面意思就能理解了，用法和其他事件一样，只是奇怪为何不起名为forcetouchdown,forcetouchup ?? ?...backdrop-filter iOS9 中的Safari支持背景模糊这个CSS属性 CSS代码 ? 效果如下: ?...CSS Supports iOS9中，CSS也可以做一些特性检测，即@supports，用法和media query一样简单，例如 CSS代码 ?...这个属性是干嘛的，看下面的图就知道了，除了从最后变换到起始位置不是很自然以外，中间的过程是不是屌屌的？！ ?...Split View 分屏模式，在这种模式下，浏览器可能会呈现如下三种状态（头疼的事情就来了） 1. 以1/3屏幕宽度呈现 2. 以1/2屏幕宽度呈现 3. 以2/3屏幕宽度呈现 ?

9425 0

移动端H5坑位指南

唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。...-- 设置Safari全屏，在iOS7+无效 --> <!...{ -webkit-overflow-scrolling: touch; } .elem { overflow: auto; } 禁止滚动传播与桌面端浏览器不一样，移动端浏览器有一个奇怪行为...这种行为称为滚动传播。若不想产生这种奇怪行为可直接禁止。...100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。

4.3K1 0

微信小程序布局单位的使用

如在 iPhone6 上，屏幕宽度为750 px，则共有个750 物理像素，则750 rpx = 375px = 750 物理像素例如 : 1rpx = 0.5px = 1物理像素但是不同iOS设备上...视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 vw：viewpoint width，视口宽度，1vw等于视窗宽度的1%。...vh：viewpoint height，视口高度，1vh等于视窗高度的1%。 vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。...小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw 小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh [图片.png] vmin：vw和vh中较小的那个...vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome

3.7K6 1

iOS 9对前端做了什么？

随着9月25日iPhone6s的发货，早已预订入手的小伙伴已开始了新一轮的研究。那么它的到来对于前端来说有哪些新东西？...看字面意思就能理解了，用法和其他事件一样，只是奇怪为何不起名为forcetouchdown,forcetouchup ?? ?...backdrop-filter iOS9 中的Safari支持背景模糊这个CSS属性 CSS代码 ? 效果如下： ?...CSS Supports iOS9中，CSS也可以做一些特性检测，即@supports，用法和media query一样简单，例如 CSS代码 ?...Split View 分屏模式，在这种模式下，浏览器可能会呈现如下三种状态（头疼的事情就来了） 1. 以1/3屏幕宽度呈现 2. 以1/2屏幕宽度呈现 3. 以2/3屏幕宽度呈现 ?

1K6 0

CSS入门13-单位详解

3.1.4 ch ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值。 IE8-不支持。 ch在实际中主要用于盲文排版。...关于视窗相关的单位有vh、vw、vmin、vmax4个单位。兼容性上，IE8-不支持，IOS7.1-不支持，android4.3-不支持。...(对于vmax，所有IE浏览器都不支持) 另外，黑莓错误的将其相对于视觉视窗来计算。而safari奇怪地相对于html元素来计算，如果html中增加了内容，这两个单位也会发生变化。...3.2.3 vmin 布局视窗高度和宽度之间的最小值的 1/100 设置height: 100vmin;width: 100vmin;可以达到类似于contain的效果。...3.2.4 vmax 布局视窗高度和宽度之间的最大值的 1/100 设置height: 100vmax;width: 100vmax;可以达到类似于cover的效果。

8902 0

某IT培训班一阶段前端面试题

核心区别：margin 是“盒子外部间距”（与其他盒子的距离），padding 是“盒子内部间距”（内容与边框的距离），使用场景划分：（1）使用 margin 的场景控制元素与其他元素的间距（如列表项之间的间距...核心要求：语义化、结构化，不掺杂样式和行为。样式层（CSS）：Cascading Style Sheets（层叠样式表），负责定义网页的外观和布局（如颜色、字体、间距、定位），是网页的皮肤。...行为层（JS）：JavaScript，负责定义网页的交互逻辑（如点击事件、动画效果、数据请求），是网页的灵魂。核心要求：与 HTML/CSS 分离，通过 DOM 操作实现交互。...BFC（块级格式上下文）触发条件BFC（Block Formatting Context，块级格式上下文）是一个独立的渲染区域，内部元素的布局不受外部元素影响，外部元素也不受内部元素影响，核心作用是“解决浮动塌陷...（2）清除苹果 Safari 默认边距与样式干扰苹果 Safari 默认给 body 添加 8px 边距，且有“滚动回弹”“默认字体大小”等特性，会导致设置的宽度被压缩，需全局重置样式：/* 苹果设备专属样式重置

2122 0

css背景图background-position百分比的理解

包括：Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+ ....百分比单位 background-position中的百分比单位是个很有意思的东西。其表现与CSS中其他的百分比单位表现都不一样。...例如，一个图片： img { position: absolute; left: 100%; } 一定是在父容器外部。但是，在值中，却是不一样的表现。...实际上是有一个公式的： positionX = (容器的宽度-图片的宽度) * percentX; positionY = (容器的高度-图片的高度) * percentY; 因此，当background-position...因为图片的尺寸大于容器尺寸，所以： (容器的宽度-图片的宽度) * -50% 的结果是个正值； (容器的高度-图片的高度) * -50% 的结果也是个正值; 所以…… 恩！相信大家都应该懂了！

1.7K3 0

Tcplayer 在ios无法正常播放直播流

在开发微信公众号时候， ios下就是无法播放直播流。安卓下可以自动播放。...script> var player = new TcPlayer('id_test_video', { "m3u8": url, //请替换成实际可用的播放地址..."autoplay" : true, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的..." : "", "live" : true, "width" : '480',//视频的显示宽度...，请尽量使用视频分辨率宽度 "height" : '320'//视频的显示高度，请尽量使用视频分辨率高度

2.5K2 0

移动端常用的meta总结

声明viewport视口 viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。...其中最为重要的就是要设定一个展示页面的宽度width=device-width，如果我们不设置的话，width默认的值是980PX，假设我们当前用的是IPHONE 5来访问H5页面，IPHONE 5本身的宽度只有...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale...Safari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接。...至于“图标阴影”，是IOS设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式。

1.5K3 0

【IOS开发基础系列】Autolayout自动布局专题

虚线方块是根据自动布局显示视图的frame。实线方块是根据你在屏幕上放置的视图的frame。这两个应该吻合的，但是这里并没有。 Note：你可能会奇怪，为什么Xcode不为X轴方向自动增加一个约束。...在接着后面-[]中括号里面对当前的View/控件的高度/宽度进行设定； options：字典类型的值；这里的值一般在系统定义的一个enum里面选取； metrics：nil；一般为nil，参数类型为NSDictionary...，从外部传入//衡量标准； views：就是上面所加入到NSDictionary中的绑定的View；在这里要注意的是AddConstraints 和AddConstraint之间的区别...H: :表示水平 >= :表示视图间距、宽度和高度必须大于或等于某个值宽度和高度必须小宇或等于某个值 == :表示视图间距、宽度或者高度必须等于某个值...-[view]- : 设置视图的宽度高度 5. |-30.0-[view]-30.0-|: 表示离父视图左右间距 30 6. [view(200.0)] :表示视图宽度为200.0 7.

1.1K4 0

关于“吴亦凡入伍”H5背后的技术—兼容android【前端篇】

这次要分享是在兼容android下遇到的难点和兼容的思路：第一个问题就是为了实现 Page1中里面图片中的人物要突然动起来，然后走出页面，那么video在初始化的时候就不能出现播放的icon，在IOS...这样做就引发另外一个问题，这个页面的video的宽度是自适应，意思就是宽度和高度会随着屏幕的宽度等比缩放，那么覆盖在video上面这个的高宽也不能是固定的，也要跟着video等比缩放。...这里我们就会用到保持元素宽高比的技巧，为元素添加的padding-top百分比值。因为padding取值百分比时候，是相对于包含块的宽度而定的。...转化到前端的逻辑：用户滚动页面一定高度之后，要连续播放视频1,2 中间用户是没有用户触发行为的。...最后关于兼容腾讯新闻app和IOS自带浏览器的问题在这里就不细说了。另外在某些iphone5和5S在safari下，如果当前页面的后面有全屏的视频，即使不显示，位置也不在视窗内。

9659 0

面试官：对下面的 CSS 题目回答一遍

两种盒模型分别说一下盒子模型盒子模型的各个部分 content-box: 内容的实际宽高 padding-box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置 border-box...IE 怪异盒子模型使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px)....Content here 第四种这个方法使用了一个 position:absolute，有固定宽度和高度的...Correct the inability to style clickable types in iOS and Safari. * 2....，那么将自动收缩成文字的宽度清除浮动的方法尾元素清除浮动。

1.6K2 0

CSS 布局技巧 | 移动端 H5 滚动条深度解析，从触发逻辑到多端兼容

（touch-action）'}1.2 移动端触发场景分析（1）滚动条的触发条件在移动端，滚动条的触发通常与内容的高度和容器的宽度有关。...iOS Safari单指垂直滑动强惯性，带橡皮筋效果Android Chrome单指任意方向滑动弱惯性，可被JS阻止微信X5内核需主动启用touch事件默认禁用惯性二、overflow: auto vs...布局影响：滚动条占用固定空间，导致容器实际内容区域被压缩（例如水平滚动条占据高度，垂直滚动条占据宽度）。典型问题：在未溢出时，禁用状态的滚动条造成视觉干扰，且浪费屏幕空间。...三、多端兼容性问题与解决方案3.1 iOS Safari 滚动惯性缺失问题现象：页面滚动生硬，松手即停。...这是因为iOS的vh单位可能会加上底部的URL栏，导致高度计算错误。解决方法：使用自定义高度来替代vh单位。

8142 0

移动端web开发入门笔记

，主要考虑android，ios，windows三大平台就可以了。...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari...，浏览器的行为 5.未设置meta viewport时，页面怎样显示总而言之，在我们进行移动端web开发的时候将 <meta name="viewport" content="width=device-width...%（流式布局）流式布局实际上就是百分比宽度 + 固定高度，当前国内百度的移动端页面就是这么做的。当浏览器宽度缩小，容器也跟着缩小，当设备屏幕较小时，体验也会好一点。...="telephone=no"> 默认情况下，Safari和IOS会自动识别像手机号码的文本，这个meta标签是用来禁止这项功能的 <link rel="apple-touch-icon" href="

1.4K1 0

移动端web开发入门笔记

2.2K9 0

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

1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone...我们可以利用一句简单的javascript代码来实现这个效果 setTimeout(scrollTo,0,0,0); 请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时...至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的...11、如何检测用户是通过主屏启动你的webapp 看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone ipod ipod touch...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari

2.9K2 0

css 文字自适应大小_div自适应窗口大小

，1vw等于视窗宽度的1%。...vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。...vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome...x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀...) ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4

4.4K2 0

Web端集成TRTC SDK、集成播放器SDK

WebRTC 技术由 Google 最先提出，目前主要在桌面版 Chrome 浏览器、桌面版 Edge 浏览器、桌面版 Firefox 浏览器、桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持.../2157_358535a.m3u8", //请替换成实际可用的播放地址 "autoplay" : true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的..." : '320'//视频的显示高度，请尽量使用视频分辨率高度 }); PC浏览器实现更低延迟，支持flash： var player = new TcPlayer('id_test_video',...，用于PC平台的播放请替换成实际可用的播放地址 "autoplay" : true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的 "poster..." : "http://www.test.com/myimage.jpg", "width" : '480',//视频的显示宽度，请尽量使用视频分辨率宽度 "height" : '320'//视频的显示高度

5.1K4 0

点击加载更多

三. CSS layout（布局）

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

iOS 9对前端做了什么？

移动端H5坑位指南

微信小程序布局单位的使用

iOS 9对前端做了什么？

CSS入门13-单位详解

某IT培训班一阶段前端面试题

css背景图background-position百分比的理解

Tcplayer 在ios无法正常播放直播流

移动端常用的meta总结

【IOS开发基础系列】Autolayout自动布局专题

关于“吴亦凡入伍”H5背后的技术—兼容android【前端篇】

面试官：对下面的 CSS 题目回答一遍

CSS 布局技巧 | 移动端 H5 滚动条深度解析，从触发逻辑到多端兼容

移动端web开发入门笔记

移动端web开发入门笔记

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

css 文字自适应大小_div自适应窗口大小

Web端集成TRTC SDK、集成播放器SDK

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐