当我在iphone上退出我的网站边框时出现空白 - 腾讯云开发者社区

文章/答案/技术大牛

发布

适配iPhone X 的齐刘海

起初我以为会需要做好多工作，很像当我第一次学习 CSS media queries 时--但一旦你学过一些新 CSS 属性后，就会变得简单。...事实上，适配 Sensor Housing 很简单，接下来我将教你。有Mac电脑，可以下载一个模拟器，如果你有真机就更好了！...问题：当 iPhone X 被旋转为横向时，设备左右可得到的内容区域是不一样的，这是因为需要取决于设备的绝对方位和 sensor housing 的位置，你站点内容竖直方向的安全区域在...我们的数据显示有 5%-10%的 iPhone X 用户使用横屏，或许是因为屏幕大，或许是因为关于 sensor housing 高涨的讨论导致想看看会出现什么情况，但我很高兴他们能看到一个适应良好的网站...iOS 的解决方案是两边留白以确保内容都可见。这是一个足够好的解决方案，但幸运的是苹果给了一些额外的特性以此来帮助网站充分利用无边框的优势。

1.2K9 0

适配iPhone X 的齐刘海

6992 0

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

是的

没有找到

关于无障碍设计的七件事

当根据WCAG来设计和开发时，可以使网站内容更易被有障碍的人士所接受。换句话来说，当文本大小是24px或18px加粗或者更大时，在白色文本背景上使用的最浅的灰色是#959595。 ?...Dragon使用后，会在网页上叠加一层内容：在每个超链接上面出现数字标识。用户可以大声说出一个数字，这样就能激活一个链接。如果是那种需要鼠标悬停在上面才会出现的链接呢？...应该做到在有链接的空白区域旁边显示数字。 ? 下图是领英的?。这是我个人主页的截屏。 ? 当我把鼠标停留在个人简历卡片上的时候会变成下图。 ?...再进一步，当我把鼠标悬停在标题上时，文本会变为蓝色，表示我已经可以点击这一项了。 ? 这种设计方式可能会导致无障碍的问题。下面是一种解决方案。在每块输入框后面放一个小铅笔icon。...当我把鼠标悬停在某块地方时，蓝色出现了。 ? 当我提出这种解决方法时，有的设计师会说，“感觉有点重了”。也许从视觉上是有一点。但是它是无障碍设计的解决方案。此外，它只出现在用户的个人资料页面上。

4.2K3 0

面向Java开发者的ChatGPT提示词工程（6）

GPT 似乎很好地写了一个描述，很好地完成了我要求它做的事情，也就是从技术说明书开始写手机描述。但当我们看到这个时，感觉有点长。也许我们想让它短一点。...这实际上看起来是一个更好的简短描述，介绍了一款手机。让我们再检查一下手机描述的长度，有137个字。GPT 在遵循非常精确的字数限制方面还可以，但不是很好。但这实际上还不错。...在完善网站文本的过程中，我们可能会发现这个网站并不是面向所有消费者销售的，而是专注于向摄影爱好者销售，因为他们更加关注手机的摄像头。...通过改变提示词，我们可以让它更专注于我们想要的特定特征。当我看到这个时，我们可能会决定在描述的最后还要包括手机的重量。所以，也许我们可以进一步改进这个提示。...但是，对于更成熟的应用程序，评估提示词在多个资料简介上的表现可能是有用的，例如在多个资料简介上测试不同的提示词，以查看其在平均或最差情况下的表现如何。

4824 0

移动端H5的一些基本知识点总结

我们经过一些探讨,和参考目前国际上通行的方案,采用的单位是rem 那么,什么是rem?...曾经因为这一句代码,让我们前端的人排查一个问题排查了两天,始终无法解决.当我接手了项目之后,这个问题交给我,我一开始也莫名其妙.但是后来仔细检查,才发现是这一句代码惹的祸....另外,在布局上,要尽量少用浮动布局,适当在细节部分使用定位布局,并做好隐藏溢出等处理.以防止浮动布局可能出现的问题.关于定位问题,可以参考我的另外一篇博文 Css 详细解读定位属性 position 以及参数...; 边框的处理在PC端的网页制作中,我们一般就使用边框属性border: 1px solid #ddd;但是在移动端,就需要特别注意了,因为边框的宽度是计算在盒子模型当中的,所以,如果你使用不慎,可能造成你布局的困境...PC端有很大的不同.在移动端的很多经验拿到移动端来是没有作用的,可能还会起到反作用.当我们从PC端前端工程师转向到移动端前端工程师的时候,需要耐心的解决一些问题,一个一个坑的去踩,才能不断的进步.

6371 0

移动端开发需要注意事项

因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大 3.自适应布局模式在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。...为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik...最为手机网站开发者来说应该都知道的，就是设置meta中的viewport 还有就是，有些手机网站我们看到如下声明：在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式...10.如何解决Android 2.0以下平台中圆角的问题在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角： -webkit这个前缀必须要加上（在

7582 0

Bodhi Linux提供桌面启蒙

当我的朋友们看到 Enlightenment 时，他们都想要一个类似的桌面。如果你想要一个这样的桌面，你必须运行 Linux。...在离开 Enlightenment 桌面后，它仍然在我心中占据着特殊的地位，每次看到或使用它时，我都会回到我生命中那个特定的时刻，那时我睁大眼睛，对我在 Linux 桌面上能做的事情印象深刻。...我习惯了 Linux 的灵活性和可靠性，但当我看到任何类似 Enlightenment 桌面的东西时，我仍然忍不住微笑。 Bodhi Linux 就是这种情况。...当然，Moksha 和 Enlightenment 窗口管理器中都有我最喜欢的功能之一——桌面菜单。如果您左键单击桌面上任何空白处，将出现一个菜单，您可以在其中访问所有已安装的应用程序和其他条目。...但是，这时出现了第一个问题。当我尝试从 Appcenter 安装 LibreOffice 时，我收到一个错误，提示它找不到“libreoffice”包。

2.1K0 0

CSS——06扩展：高级

元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...3.2 去除图片底侧空白缝隙原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。...CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...实际上本质就是定位，哪一个大图，如何通过定位的形式把，大图里包含的小图定位到想要的位置出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。...滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门：滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多

6.3K4 0

前端成神之路-CSS高级技巧

元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ ?...负边距+定位：水平垂直居中咱们前面讲过，一个绝对定位的盒子，利用父级盒子的 50%，然后往左(上) 走自己宽度的一半，可以实现盒子水平垂直居中。 2). 压住盒子相邻边框 ?

8.4K3 0

sketch入门第1部分：画板和形状Sketch使产品设计变得非常简单。准备好了吗？转到第2部分

第1部分：画板和形状 ---- 为什么我要写这个教程今年，我在旧金山举行的大会上担任用户体验设计课程的助教。...当您看到空白屏幕时，请在左上角查看“插入”菜单。此菜单包含创建新图层所需的所有工具。 ? 插入新图层首先创建一个类似于画布的画板。您选择的大小决定了导出图像的最终尺寸。 ?...绘制画板或者您可以查看右侧的“检查器”列。如您所见，有几种不同设备尺寸的预设尺寸。我选择了iPhone 5。 ?...选择画板注意：如果您需要调整画板的大小，只需选择其名称并拖动显示在角落上的白色框。 Sketch使产品设计变得非常简单。如果你想看整个画布怎么办？让我们尝试使用位于屏幕顶部的工具进行缩小。 ?...这里有一个“边框”部分，带有一个复选框。取消选中它以删除默认边框。 ? 删除边框我们还可以更改边框上方部分的填充。我使用＃104F8A。您可以在吸管图标下方的框中输入此数字。 ?

3.5K2 0

首批 iPhone 13 用户直呼太“坑”：拍照有马赛克、不能用高刷、还与 Apple Watch “失联”？

但奇怪的是，几乎所有第三方 App 的动画都被限制在 60Hz，而这个问题并没有出现在 2017 年以来就一直采用 120Hz 高刷屏的 iPad Pro 上。...进行更改，然后点击小组件外部以退出。而这个问题也只会出现在近期发布的新品上，即 iPhone 13 系列、iPad 9 和 iPad mini 6。...前两天，网友 @u/Monzilla88 在 Reddit 网站上发布了一则帖子： “我有一个 Apple Watch SE，今天刚拿到我的 iPhone 13 Pro，两者系统都已更新至最新版本。...可每当我尝试在手机上启用 Apple Watch 解锁时，都会收到一条错误消息，提示'无法连接 Apple Watch'。”...拍照有马赛克这还没完，今天微博上又出现了一个新词条“iPhone 13 拍照有马赛克”：有网友称自己刚买的 iPhone 13 拍照后放大照片会自动出现马赛克，并且屏幕颜色分辨也不准确。

6601 0

5.4寸iPhone12全面屏或成今年最完美的顶级小屏旗舰

而新iPhoneSE得益于此的确销量爆棚，又赶超iPhone11之势。再看苹果一贯老旧的16：9全平衡设计，所以上下有极大的边框，并没有充分的利用机身体积。...其次在配置上除了A13处理器亮眼外，其它方面只能用平庸来形容。而真正的小屏旗舰，我也早就说过，是9月份即将发布的iPhone12。它将补全所有新款iPhoneSE的缺点。...而且在价格上也并不会比新iPhoneSE贵太多（毕竟还有4G版），配置上5纳米A14芯片绝对要比A13强上一个档次，后置相机，电池和屏幕材质等也都有肉眼可见的极大提升。...7在机身体积上和新款iPhoneSE是完全一致的。...该网站称，苹果公司的“数字化世界”计划正在成功实施：随着Apple Pay的推出，人们会忘掉纸币，在将于秋季发布的iOS 14操作系统中，将出现通过智能手机解锁汽车的功能。

5232 0

APP提交审核后被苹果拒掉的可能因素(转)

31、应用内涉及到抽奖的运营活动，未声明与苹果官方无关。 33、自认为第一版产品还不够完善，于是过度谦虚地在启动画面加上了“beta”字样。苹果的反馈是，不允许测试版产品上架。...55、在程序的说明信息中有“越狱”俩字，被拒，后来把这俩字去了，PASS。但是：如果我在程序运行中检测出手机越狱了，这结果报出来让不让过？...56、使用GPS常驻后台服务，要我给出一个合适的理由，否则不往下审核，还好，解释一翻过去了。 57、出现“给我们五星好评”之类的文字。...58、应用内提到付费项目但木有通过苹果付费渠道（妄图不让苹果老大赚钱） 59、问我服务是不是只在IOS平台，还是同时支持多平台（我当然拥护苹果老大的领导，木有其他平台，iPhone专属） 60、...65、因为上行短信实现用户认证被拒 66、果测试人员的手机号在国外，因为收不到国内短信，被拒 67、他们打开我的一个APP测试，显示空白无内容，哈哈，因为他们相册里没有960*640的图，就说我该程序功能没开发完毕吧

2.1K3 0

CSS笔记(22)

现在在做品优购项目的案例,里面也有很多新知识需要记录一下,顺便把准备工作都记录一下,下次自己做的时候方便看. favicon图标我们看到打开一个标签页时前面的小图标就是favicon图标,如下图的京东小图标...favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上,目前主要的浏览器都支持favicon.ico图标. 第一步使用PS切图即可....SEO的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度. 页面必须有三个标签用来符合SEO优化....到这里就算是做完了公共部分的样式,接下来就是制作首页了. 其中有一个地方，我们设置了鼠标经过时出现边框，但是却出现了下图情况，图片往下抖了一下。...这是因为本来没有边框,再给他加上一像素边框,所以势必会影响效果. 解决方案:让li本质上就有一像素边框,当我们鼠标经过时再换颜色,这样图片就不会抖动了.

3733 0

全面屏下的新交互方式

第三种：圆角+异形+无边框类似于iphone x这样，屏幕四周圆角+上方屏幕异形(保留传感器和摄像头等)+无边框，难度无疑是最大的，成本也是最高的；这里可以再说一下三星S8，是18.5:9的屏幕，但是它有曲面...1.Home Indicator 这个是苹果提出的，就是在屏幕下方的一个黑色的横线，可以概括为三个功能点：点击上滑可以返回主屏幕上滑停顿进入多任务界面直接左右滑动，切换应用我们可以发现，这里更倾向于滑动类型的交互...2.悬浮触点其实悬浮触点这个功能大部分手机厂商都会有，我认为在全面屏上这个功能还是有很大的发挥空间的，一方面根据悬浮触点，用户可以进行快捷操作，另一方面悬浮触点可以大大缩短用户交互的物理路径，比如一个查看通知的场景...4.屏幕利用率这个是要特别注意的，手机屏幕更大了，那么一些App在设计的时候要考虑到是否需要充分利用屏幕，比如可以选择上下留出一部分空白边框，让图片完全显示在全面屏上，当然还可以放大切割图片，达到完全显示在全面屏上...除了上面这些之外，我认为还有一些可以在设计产品交互时候用到的，如边缘手势，在屏幕左右两侧滑动时实现某种功能（调节声音、亮度等）；小屏幕功能（将显示内容缩小，展示在屏幕左下角或右下角中），能够满足一部分热衷于小屏幕的用户

1.3K6 0

惊喜，热心网友为Nodes小程序写的超详细使用指南

点击 X 按钮即可退出Nodes小程序；若想返回上一级界面，安卓用户可以使用手机底部的虚拟“返回键”（此按键一般是在最右边）；iPhone用户可以直接点击 X 按钮左侧的 < 按钮。 4....如果你是安卓用户, 点击右上角的“更多”按钮，选择发送给朋友以将图片发送给微信好友；如果你是iPhone用户，长按图片文件，在出现的菜单中点击发送给朋友以将图片转发给微信好友。 ---- 6....3.为什么在我的iPad上找不到小程序入口？微信小程序目前只能在安卓平台和iPhone上使用。iPad上暂不支持微信小程序。 4....在小程序主界面点击右上角的“更多”按钮，选择添加到桌面即可。 9.我要如何降低新增子主题时的失误率？稍微增加长按主题的时间可以降低失误率。 10.我要如何避免缩放时的误操作？...在缩放过程中手指若接触到了子主题则容易引起误操作。建议在思维导图空白区域进行缩放手势操作。 11.我想移动子主题，为什么Nodes有时会识别成新增子主题？移动子主题要求迅速拖动该子主题。

2.7K6 0

乔布斯的工业美学输给了手机壳

下一代IPhone,暂且叫做IPhone6,面世时间未知，各种“谍照”已不断流出：变长，变薄，变轻，窄边框，曲面屏幕，NFC，散热新材料，续航加强，你能想到的手机潮流在不同版本中出现。...一问才知道，他这是港版IPhone5s,土豪金，套了个地摊买的手机壳。准确地说，是边框保护壳，这样绚丽的土豪金后背不会被遮住。朋友说，这是为了防摔。...实际上，真正的防摔手机是Nokia，Motolora这些老牌手机。我曾经使用过一部目前以299元价格进入超低价安卓机的Moto MT620，经过我数十次不戴套摔落测试，目前状态良好。...正是这些需求使得手机壳也在成为一个不小的市场，它们带来了不少的就业岗位：模具、工厂、批发、地摊、淘宝店。在IPhone新款尚未发布，有谍照流出时，深圳各厂已经在为其设计手机壳套和贴膜了。...这样可以确保第一部IPhone5S到达用户手里时，TA可以在任何一个贴膜处买到一个“原装正品”的手机壳。目前，手机壳市场格局玩家众多，但也已出现明星厂商，它们大都青睐苹果产品。

1.3K4 0

移动Web学习笔记

当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景，设置 -webkit-tap-highlight-color: transparent时就不会产生这个背景...5. rel=”apple-touch-icon” 解释：在iPhone, iPad上的safari浏览器中有个将网站添加到主屏幕上的按钮，当网站设置了rel=”apple-touch-icon属性...，当网站添加到屏幕上，屏幕上会显示网站的图标点击此处查看详细解释 6....在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式... 解释：iphone的私有标签，它用于给iphone上的safari

2.5K3 0

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

目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。...important; } android系统中元素被点击时产生边框部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。...加入自动触发播放的代码 $('html').one('touchstart', function() { audio.play() }) iOS 上拉边界下拉出现空白手指按住屏幕下拉，屏幕顶部会多出一块白色区域...手指按住屏幕上拉，底部多出一块白色区域。在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。...这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

5K2 0

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

放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面做了缩小优化，所以字体等都相应缩小了（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。...另外一种情况（一般在页面内容很少时 iphone5及以上常发生），当输入框弹出时 fixed元素挤到输入框上，当输入框消失时， fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在... 625%即 100px，然后 1rem就相当于 100px 20.移动端字体使用 font-family: Helvetica,sans-serif;我看这也是天猫使用的 21.在 iphone原生键盘上用...（这个没用过） ③ 有的时候比如弹出一个 iphone上滑动出来的层，点击黑色半透明区域弹出层消失，这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时，想禁止屏幕的滑动...要设置 cache:false（iphone、android的某些手机都可能出现） 7.在微信 js config的时候，如果 URL的参数有如 ?a={"param": "1"},会导致签名失败。

4.2K4 0

点击加载更多

适配iPhone X 的齐刘海

适配iPhone X 的齐刘海

关于无障碍设计的七件事

面向Java开发者的ChatGPT提示词工程（6）

移动端H5的一些基本知识点总结

移动端开发需要注意事项

Bodhi Linux提供桌面启蒙

CSS——06扩展：高级

前端成神之路-CSS高级技巧

sketch入门第1部分：画板和形状Sketch使产品设计变得非常简单。准备好了吗？转到第2部分

首批 iPhone 13 用户直呼太“坑”：拍照有马赛克、不能用高刷、还与 Apple Watch “失联”？

5.4寸iPhone12全面屏或成今年最完美的顶级小屏旗舰

APP提交审核后被苹果拒掉的可能因素(转)

CSS笔记(22)

全面屏下的新交互方式

惊喜，热心网友为Nodes小程序写的超详细使用指南

乔布斯的工业美学输给了手机壳

移动Web学习笔记

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

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐