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

移动web端常见bug

移动端如何清除输入框内阴影 Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 ?...禁止文本缩放 Q: 禁止文本缩放 A:代码如下 ? 如何禁止保存或拷贝图像 Q: 如何禁止保存或拷贝图像 A:代码如下 ?...解决字体在移动端比例缩小后出现锯齿的问题 Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 ?...实现横屏竖屏的方案 css 用 css3媒体查询，缺点是宽度和高度不好控制 @media screen and (orientation: portrait) {    .main {       ...，竖屏时强制横屏缩小*/        overflow: hidden;    } }  @media screen and (orientation: landscape) {    .main

1.8K30

移动端基础

web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问 2、视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...viewport宽度，可以设置device-width（宽度是设备宽度）特殊值 initial-scale 初始缩放比，大于0的数字（倍数，一般为1.0） maximum-scale 最大缩放比，大于0...5.2css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址...div a { -webkit-tap-highlight-color: transparent; } /* *移动端浏览器默认的按钮和输入框外观要自定义更改需加上这个属性* */

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

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

最后 , 整个盒子模型向左走自身宽度的一半 , 此处还要配置兼容老版本浏览器的样式 ; /* 兼容老版本浏览器 */ -webkit-transform: translateX(-50%...; 当浏览器的宽度超过最大宽度 , 则网页布局最大就是该 最大宽度 , 继续放大网页不再随着页面一起放大 ; 当浏览器的宽度小于最小宽度 , 则网页布局最小就是该 最小宽度 , 继续缩小显示布局布局...; /* 设置最大和最小宽度 */ min-width: 320px; max-width: 640px; 3、使用 Flex 弹性布局管理宽度 在搜索框中 , 左侧是搜索栏 ,...右侧是搜索按钮 ; 右侧的搜索按钮始终都是 44x44 像素大小 ; 左侧的搜索栏随着网页布局的宽度变化而变化 ; 此处 使用 Flex 弹性布局管理宽度 , 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置...iOS上加上这个属性才能给按钮和输入框自定义样式*/ input { -webkit-appearance: none; } /*禁用长按页面时的弹出菜单*/ img, a {

27520

移动web端常见bug汇总001

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 -webkit-appearance: none; 禁止文本缩放 Q:...: none;} 解决字体在移动端比例缩小后出现锯齿的问题 Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 -webkit-font-smoothing: antialiased; 设置input...important; margin: 0; } 实现横屏竖屏的方案 css 用 css3媒体查询，缺点是宽度和高度不好控制 @media screen and (orientation...，竖屏时强制横屏缩小*/ overflow: hidden; } } @media screen and (orientation: landscape) { .main

1.9K40

移动端bug汇总（一）

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 -webkit-appearance: none; 4.禁止文本缩放 Q...: none;} 6.解决字体在移动端比例缩小后出现锯齿的问题 Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 -webkit-font-smoothing: antialiased; 7...important; margin: 0; } 14.实现横屏竖屏的方案 css 用 css3媒体查询，缺点是宽度和高度不好控制 @media screen and (orientation...，竖屏时强制横屏缩小*/ overflow: hidden; } } @media screen and (orientation: landscape) { .main

3.2K130

移动端bug汇总（一）

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 -webkit-appearance: none; 4.禁止文本缩放 Q...: none;} 6.解决字体在移动端比例缩小后出现锯齿的问题 Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 -webkit-font-smoothing: antialiased; 7...important; margin: 0; } 14.实现横屏竖屏的方案 css 用 css3媒体查询，缺点是宽度和高度不好控制 @media screen and (orientation...，竖屏时强制横屏缩小*/ overflow: hidden; } } @media screen and (orientation: landscape) { .main

1.3K20

【学习图片】1.图片简史

为了使图像变得灵活，开发人员开始使用CSS将max-width：100％设置在图像上（或所有图像，整个站点），告诉浏览器的渲染引擎通过缩放图像来防止图像超出其父容器。...使用 img { max-width: 100% } 意味着，当灵活的容器调整大小时，图像将根据需要缩小。与设置更严格的 width: 100% 不同，这也确保图像不会超过其固有大小而被缩放。...很长一段时间以来，这就是处理图像的规则：使用浏览器能理解的格式，使用合理的压缩级别，永远不要向上缩放图像。 事例地址：https://codepen.io/web-dot-de......对于仅通过小视口查看页面的用户，一切都会看起来很正常，因为图像将很好地缩放。在呈现的页面中，一个巨大但缩小的源图像看起来与适当大小的图像没有任何区别。...当响应式Web设计成为主流开发实践时，浏览器对img的性能进行了优化，但除了最优越的用户外，页面的图像内容从一开始就是低效的。无论浏览器如何快速请求、解析和渲染图像源，该资源很可能比用户需要的更大。

1.1K40

第119天：移动端：CSS像素、屏幕像素和视口的关系

CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素） 。...网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip...桌面浏览器以屏幕宽度进行布局，手动缩放，相当于改变dpr，以缩小为例： 　　1、缩小后，dpr变小，viewport的视觉宽度不变，逻辑宽度变大 　　2、缩小后，百分比宽度的元素，百分比仍然生效，逻辑宽度和视觉宽度跟着父元素变化...以缩小为例 　　1、viewport的逻辑宽度和视觉宽度初始都为width，逻辑宽度不变，视觉宽度以initial-scale缩小；视觉宽度缩小到跟屏幕一样宽时，不再缩小，变成逻辑宽度变大，视觉宽度不变...移动浏览器手动缩放 不分viewport、百分比宽度元素、固定宽度元素，全都是视觉宽度缩放，逻辑宽度不变。

1.7K50

07-移动端开发教程-移动端视口

1.4.2 CSS像素(css pixel): CSS像素是Web编程的概念，CSS样式代码中使用的逻辑像素。1个逻辑像素可能对应多个物理像素（发光点）。...如果我故意设置操作系统分辨率为512*384（水平和垂直各缩小1倍），那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍，所以CSS中的像素只是相对，不是绝对的。...2.2 移动端视口 在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。... 如果只是设置viewport的width属性时，iphone的浏览器自动将页面进行缩放到恰好放下页面而不出现滚动条...这个值是确定整体网页缩放的比例。 缩放比 = 理想视口的宽度 / 视觉视口的宽度 也就是说当视觉视口的宽度 和 理想视口的宽度相等时，则就是1。

1.4K80

07-移动端开发教程-移动端视口

1.4.2 CSS像素(css pixel): CSS像素是Web编程的概念，CSS样式代码中使用的逻辑像素。1个逻辑像素可能对应多个物理像素（发光点）。...如果我故意设置操作系统分辨率为512*384（水平和垂直各缩小1倍），那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍，所以CSS中的像素只是相对，不是绝对的。...2.2 移动端视口 在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。...如果只是设置viewport的width属性时，iphone的浏览器自动将页面进行缩放到恰好放下页面而不出现滚动条，所以此时：visual viewport == layourt viewport。...这个值是确定整体网页缩放的比例。 缩放比 = 理想视口的宽度 / 视觉视口的宽度 也就是说当视觉视口的宽度 和 理想视口的宽度相等时，则就是1。

1.8K120

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

不过，该方案依然会有很多问题： ●对缩小版页面内细节内容的浏览，依然要依靠放大和滚动，体验不好； ●如果 为 PC 设计的 网页的 CSS 宽度描述大于 980px，那么在移动端展示时，初始页面依然会有滚动条...浏览这类站点时，随着屏幕的缩小，你会看到页面模块的布局结构在伸缩、流动或显隐变化，文字图片等主体内容在布局容器内流动填充、其大小也一直在做梯级变化。...其技术实现通常为：服务器根据浏览器请求的 user-agent 判断设备类型，然后返回(或重定向)对应的站点内容。 本文，我们仅讨论 m 站中的移动端适配。...●设置 viewport 宽度为 device-width 或其他固定值，以得到 px 为单位的文字、图标或边线等期望的渲染效果 ●css 单位使用 rem，js 根据 viewport 宽度以及 css...8.3 viewport 的 W3C 草案规范 注：本小节仅作扩展了解，暂无实际应用价值 从目前 W3C 的草案规范来看，他希望按如下方式在 css 中声明 viewport，而不是在中⑧。

2.7K30

viewport深入理解和使用

下图为常见一些设备浏览器默认viewport宽度：  css中的1px不等于设备的1px 在css中经常使用px做单位，PC端浏览器中的1px往往都是对应电脑屏幕的1个物理像素，这救我让我们误以为1px...用户缩放也会影响。如果把页面放大一倍，那么css1px所代表的物理像素也会增加一倍，反之，也会缩小一倍。...很显然不会是1，因为当 initial-scale = 1 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport...比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。...第二：每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。

1.2K10

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

不过，该方案依然会有很多问题： ●对缩小版页面内细节内容的浏览，依然要依靠放大和滚动，体验不好； ●如果 为 PC 设计的 网页的 CSS 宽度描述大于 980px，那么在移动端展示时，初始页面依然会有滚动条...浏览这类站点时，随着屏幕的缩小，你会看到页面模块的布局结构在伸缩、流动或显隐变化，文字图片等主体内容在布局容器内流动填充、其大小也一直在做梯级变化。...其技术实现通常为：服务器根据浏览器请求的 user-agent 判断设备类型，然后返回(或重定向)对应的站点内容。 本文，我们仅讨论 m 站中的移动端适配。...●设置 viewport 宽度为 device-width 或其他固定值，以得到 px 为单位的文字、图标或边线等期望的渲染效果 ●css 单位使用 rem，js 根据 viewport 宽度以及 css...8.3 viewport 的 W3C 草案规范 注：本小节仅作扩展了解，暂无实际应用价值 从目前 W3C 的草案规范来看，他希望按如下方式在 css 中声明 viewport，而不是在中⑧。

3.1K20

viewport深入理解和使用

下图为常见一些设备浏览器默认viewport宽度：  css中的1px不等于设备的1px 在css中经常使用px做单位，PC端浏览器中的1px往往都是对应电脑屏幕的1个物理像素，这救我让我们误以为1px...用户缩放也会影响。如果把页面放大一倍，那么css1px所代表的物理像素也会增加一倍，反之，也会缩小一倍。...很显然不会是1，因为当 initial-scale = 1 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport...比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。...第二：每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。

68530

两个 viewports 的故事-第二部分

手机浏览器的供应商希望为客户提供最好的用户体验，这意味着“尽可能如桌面显示的一样”。因此必须使用一些小花招。 两个viewports 所以视图太窄而不能作为你 CSS 布局的基础。...当视觉视图通过缩放改变时（如果是放大，屏幕上的 CSS 像素会变少），布局视图的尺寸不会变。...当然只有两种属性都被支持时才有效。 幸运的是，缩放比例并不重要。你需要知道的是当前屏幕上有多少 CSS 像素，你可以通过 window.innerWidth 获得（如果该属性被支持的话）。...width/height 将布局视图作为参照，使用 CSS 像素计算。而 device-width/height 将设备屏幕作为参照，使用物理像素计算。...举例来说，Nexus One 实际宽度为 480px，但是谷歌的工程师认为使用 device-width 时布局视图 480px 的宽度太大。

1.7K70

移动web开发

用户是否可缩放,yes/no (1/0) 03 二倍图 物理像素＆物理像素比 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的.这是厂商在出厂时就设置好的,比如苹果8是750*1334(也就是手机上的分辨率...通常使用二倍图,因为iPhone7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求 背景图片注意缩放问题....背景缩放 background-size 语法: background-size: 宽度 高度; 假如有两个值,那么就是直接拉大或缩小图片,如果是只有一个值,那就必然是宽度,高度默认不变,所以是按照宽度等比例缩放...移动端浏览器的技术解决方案 当我们PC端写的a链接放到电脑上时,点击的时候会有一个高亮,如何将他去除呢....-webkit-tap-highlight-color: transparent; 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式: -webkit-appearance

2.2K20

Css-移动端适配总结 前言PC端Mobile总结参考&引用

原理则是因为我们的PC中1个设备像素等于1个css像素。 当用户放大或者缩小屏幕时（按住ctrl+滚动鼠标轮，也就是改变zoom值），则有所不同。...以下是引用ppk大神的三张图片， 下面深蓝色为设备像素， 上面浅蓝色为css像素 正常情况下： ? 缩小时： ? 放大时： ?...听起来有点难以理解， 下面讲一个例子： 假设， 你给某个div元素设置了width：50%的样式后， 当你缩小放大浏览器的时候，你会发现div元素总是占据了50%的宽度，我们知道，宽度百分比是依赖它的包裹元素...完全等于浏览器窗口，而且它不是HTML语言元素，所以你无法通过使用css对其进行影响。...例如，当width=400，ideal viewport的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。

2.3K20

【移动端网页布局】Flex 弹性布局案例 ① ( 案例框架搭建 | html 标签结构框架 | css 初始样式 )

一、案例框架搭建 1、html 标签结构 在 html 中设置 meta 视口标签 , 设置宽度等于设备宽度 , 初始比例为 1.0 , 用户不可缩放 , 最大缩放比例和最小缩放比例都设置为 1.0 ;...transparent 完成透明 ; * { -webkit-tap-highlight-color: transparent; } 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式...= 设备宽度 */ width: 100%; /* 最小宽度 320 像素 */ min-width: 320px; /* 最大宽度 640 像素 */ max-width...margin: 0 auto; /* 字体大小 14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体 如果不是苹果手机 就使用后啊面的字体...iOS上加上这个属性才能给按钮和输入框自定义样式*/ input { -webkit-appearance: none; } /*禁用长按页面时的弹出菜单*/ img, a {

18630

移动开发-流式布局

最大宽度 – max-height 最大高度 min-width 最小宽度 – min-height 最小高度 图片 CSS初始化 normalize.css: 移动端CSS初始化推荐使用normalize.css...Normalize.css：保护了有价值的默认值、修复了浏览器的bug、是模块化的 、拥有详细的文档 Normalize.css官网地址： http://necolas.github.io/normalize.css...viewport宽度，可以设置device-width特殊值 initial-scale 初始缩放比，大于0的数字 maximum-scale 最大缩放比，大于0的数字 minimum-scale 最小缩放比...视口标签通知浏览器操作 meta视口标签目的：布局视口的宽度应该与理想视口的宽度一致，就是设备有多宽，布局视口就多宽 二倍图: 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比，1CSS像素...设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

1K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券