最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

移动端设备分辨率480*800,但显示尺寸为320的兼容问题_html/css

来源:动视网 责编:小采 时间:2020-11-27 16:00:03
文档

移动端设备分辨率480*800,但显示尺寸为320的兼容问题_html/css

移动端设备分辨率480*800,但显示尺寸为320的兼容问题_html/css_WEB-ITnose:项目:app 客户端内置浏览器嵌套页面 环境:Android webview 内置浏览器,设备分辨率 480*800 页面所有元素的高度、宽度以及边距、字体大小单位都是用的 rem,全部通过 html 的 font-size 来计算,页面有写 css 代码: @media only
推荐度:
导读移动端设备分辨率480*800,但显示尺寸为320的兼容问题_html/css_WEB-ITnose:项目:app 客户端内置浏览器嵌套页面 环境:Android webview 内置浏览器,设备分辨率 480*800 页面所有元素的高度、宽度以及边距、字体大小单位都是用的 rem,全部通过 html 的 font-size 来计算,页面有写 css 代码: @media only


项目:app 客户端内置浏览器嵌套页面
环境:Android webview 内置浏览器,设备分辨率 480*800

页面所有元素的高度、宽度以及边距、字体大小单位都是用的 rem,全部通过 html 的 font-size 来计算,页面有写

css 代码:
@media only screen and (min-device-width:361px) and (max-device-width:480px){	html{font-size:44.4444%;}	.viewport{max-width:480px;}}

问题:宽度高度计算的不对,导致界面错位。因为 android 内置的 webview 貌似最小字号只能设置到 8px,而我这边 320 显示的字号是 7px,所以导致界面有问题。
PS:我已试过 html{-webkit-text-size-adjust:none;} 此方法不行
PS2:font-size:44.4444% 是根据 720 分辨率 font-size:100% 折算出来的(320 / 720 = 44.4444%)


回复讨论(解决方案)

如果移动端你是用百分比来设置font-size 的话,请了解下em.

如果移动端你是用百分比来设置font-size 的话,请了解下em.


em:相对父级


如果移动端你是用百分比来设置font-size 的话,请了解下em.


em:相对父级


rem(root element):相对根父级
用 rem 不是更方便

720宽度 显示 100%
480宽度 显示 44%

从实际角度出发 应该都显示 100% 不能因为房间变小了 凳子就变小

从你的业务逻辑看 你采用webkit-transform-scale的css缩放会更好

感谢两位的回答,问题暂时解决了。
解决方法:以 0 为 100%,这样 320 的就是 50% 了,即 8px,而 720 则是 112.5%

文档

移动端设备分辨率480*800,但显示尺寸为320的兼容问题_html/css

移动端设备分辨率480*800,但显示尺寸为320的兼容问题_html/css_WEB-ITnose:项目:app 客户端内置浏览器嵌套页面 环境:Android webview 内置浏览器,设备分辨率 480*800 页面所有元素的高度、宽度以及边距、字体大小单位都是用的 rem,全部通过 html 的 font-size 来计算,页面有写 css 代码: @media only
推荐度:
标签: 尺寸 分辨率 兼容
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top