涉及Android手机屏幕适配的相关知识

本文通过一次意外的触摸事件问题,引出了手机屏幕适配的重要性和复杂性。作者分享了如何利用dp代替px来实现跨分辨率适配,并讨论了百分比布局和dimens.xml文件的应用。同时,还介绍了AndroidManifest.xml的配置方法以及横竖屏资源的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  昨天上班的时候无意间发现了个问题。在我做的项目里,需要自定义重写的框架有很多,对触摸事件要求很高。在自己的几个手机上测试一切正常,然后拿了同事新买的一只比较好的手机测试,发现,字体明显比我手机小了很多,这还不是什么严重的问题,重点是,我明明是点击,它却认为我是在滑动!让我瞬间想感叹:天哪噜!这手机的分辨率是有多高!

  分析下来,这现象就因为一句判断它为挪动的语句上出了问题。很low的我,在代码中是设定的死值,只要手指滑动超过了25个像素点,我就把它判为滑动。所以在一个分辨率极高的手机上就完犊子了。

  因此,我决定要把这个很蠢的定值给换掉,于是就用了屏幕密度来做了这个数值的控制,代码是非常的简单,我就不粘出来了,但是我意识到手机频幕像素适配的重要性。于是决定趁着因为双十一壕的太猛被爹妈禁足的时间来好好学习一下频幕适配相关知识(壕的是我妈的钱,我依旧那么富有,哈哈哈哈哈哈哈)。


  首先,需要理清一些术语及常见度量单位

Density 屏幕密度:屏幕的屋里面积内的像素数量,通常指dpi(每英寸点数)

Resolution 分辨率:在屏幕上的像素总数。

dp(与密度无关的像素,独立像素密度) Density-independent pixel:在定义UI布局时应该使用的虚拟像素单元,它用一种密度无关的方式来表达布局尺寸或位置。

px(像素):屏幕上的点,绝对长度,与硬件相关。

in(英寸):长度单位。[ 1英寸(in)=2.54厘米(cm) ]

dip:Dots Per Inch,每英寸所打印的点数(密度)。

sp:scaled pixels(放大像素)。主要用于字体显示best for textsize。


  那么接下来就跟着我偶像——张鸿洋大神的《Android 屏幕适配方案》开启学习路程。

  在安卓中,px = dp * (dpi / 160),以160dip(1英寸160个像素点)为标准,即1dp对应1个pixel(px),计算公式如:屏幕密度越大(dip越大),那么一个像素点对应的dp越小,反过来说就是1dp对应的像素点越多。

  从上面的分析中,简而易见。dp,脱离了像素的限制,是解决屏幕适配问题的希望。然而,现实很残酷,为4.3寸屏幕准备的UI,运行在5.0寸的屏幕上,很可能在右侧和下侧存在大量的空白。而5.0寸的UI运行到4.3寸的设备上,很可能显示不下。这么情况下,dp就显得无能为力了。

  总结:dp能够让同一数值在不同的分辨率展示出大致相同的尺寸大小。但是当设备的尺寸差异较大的时候,就无能为力了。

  在大神文中提到了两个解决这个适配问题的方案:
  一个就是Android-percent-support这个库!按百分比来布局。
  还有一个就是,在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹(dimens.xml文件,目前我搜到的字体适配方案只有这一个)。

  这两个等我有空了自己测试一下,今天就对手机屏幕适配做个了解。


  此外,屏幕适配还需要注意的事项:

1、AndroidManifest.xml设置

  在中Menifest中添加子元素android:anyDensity=”true”时,应用程序安装在不同密度的终端上时,程序会分别加载xxhdpi、xhdpi、hdpi、mdpi、ldpi文件夹中的资源。
  相反,如果设为false,即使在文件夹下拥有相同资源,应用不会自动地去相应文件夹下寻找资源:
  1) 如果drawable-hdpi、drawable-mdpi、drawable-ldpi三个文件夹中有同一张图片资源的不同密度表示,那么系统会去加载drawable_mdpi文件夹中的资源;
  2) 如果drawable-hpdi中有高密度图片,其它两个文件夹中没有对应图片资源,那么系统会去加载drawable-hdpi中的资源,其他同理;
  3) 如果drawable-hdpi,drawable-mdpi中有图片资源,drawable-ldpi中没有,系统会加载drawable-mdpi中的资源,其他同理,使用最接近的密度级别。

2、横屏竖屏目录区分

1) drawable
  a) drawable-hdpi该图片即适用于横屏,也适用于竖屏;
  b) drawable-land-hdpi,当屏幕为横屏,且为高密度时,加载此文件夹的资源;
  c) drawable-port-hdpi,当屏幕为竖屏,且为高密度时,加载此文件夹中的资源。其他同理。
  
2) layout
  在res目录下建立layout-port和layout-land两个目录,里面分别放置竖屏和横屏两种布局文件,以适应对横屏竖屏自动切换。

<think>首先,用户的问题是:"我想解决Vue2项目中Networkunavailable的问题请问Vue2Networkunavailable解决方案"。这是一个关于Vue.js开发中常见的问题,其中在运行项目时,Network显示为unavailable,意味着无法通过本地网络访问项目。从系统级指令,我需要:-所有行内数学表达式用$...$格式(但在这个问题中,可能不涉及数学,所以可能不需要)。-独立公式用$$...$$(同样,可能不适用)。-LaTeX语法正确。-使用中文回答。-生成相关问题。-在回答中引用的段落末尾添加引用标识,如[^1]。用户可见层的要求:-回答结构清晰,逐步解决问题。-保证回答真实可靠。参考的站内引用提供了几个解决方案:-引用[1]:提到了三种情况:多个网卡、配置host和public、系统环境变量问题。给出了在vue.config.js中配置devServer的方法。-引用[2]:类似,强调配置public字段和检查IP地址。-引用[3]:专注于系统环境变量,添加C:\Windows\System32\Wbem到Path。-引用[4]:再次提到在devServer中添加public。-引用[5]:建议在devServer中配置public和disableHostCheck。关键点总结:1.**多个网卡问题**:禁用多余的网络适配器。2.**配置host和public**:在vue.config.js文件中设置devServer的host和public。3.**系统环境变量问题**:添加C:\Windows\System32\Wbem到Path环境变量。我的回答应该结构清晰:-先解释问题:为什么Network显示unavailable?-然后分步给出解决方案。-确保解决方案可靠,基于引用。结构建议:1.**引言**:简述问题。2.**常见原因**:列出可能导致问题的原因。3.**解决方案**:分步骤详细说明。4.**验证**:如何确认问题解决。5.**相关问题**:生成几个相关问题。生成相关问题:-基于主题,例如:1.如何查找本机IP地址?2.Vue2项目中devServer的其他配置选项?3.如果环境变量修改无效,还有什么其他方法?确保使用中文回答。最终回答框架:-**问题描述**:Vue2项目运行npmrunserve后,Network显示unavailable,无法通过IP访问。-**原因分析**:通常由于网络配置、VuedevServer设置或系统环境问题。-**解决方案**:a.**检查网络适配器**:禁用多余网卡。b.**配置vue.config.js**:设置devServer的host和public。c.**修改环境变量**:添加Wbem路径到Path。-**步骤详解**:每一步给出具体操作。-**相关问题**:在末尾添加。引用标识:在引用内容后添加[^1],[^2]等,但引用是来自用户提供的,所以我应该引用那些内容。</think>### Vue2项目中Network: unavailable解决方案 在Vue2项目中运行`npm run serve`后出现**Network: unavailable**问题,表示项目无法通过本地网络IP访问(只能通过`localhost`访问)。这通常由网络配置冲突、Vue开发服务器设置不当或系统环境变量问题引起。以下是基于可靠实践的分步解决方案(参考社区常见修复方法[^1][^2][^3][^4][^5])。 --- ### 原因分析 - **多个网络适配器冲突**:电脑有多个网卡(如Wi-Fi、以太网、虚拟机网卡),导致Vue无法正确绑定IP[^1][^2]。 - **devServer配置缺失**:Vue的`devServer`未指定`public`字段或IP地址错误[^1][^4][^5]。 - **系统环境变量异常**:缺少`C:\Windows\System32\Wbem`路径,影响网络管理功能[^1][^3][^5]。 ### 分步解决方案 按照以下步骤操作,问题通常可解决(优先尝试方法1,若无效再逐步排查)。 #### 方法1: 配置Vue项目的devServer(推荐) 此方法直接修改Vue开发服务器设置,确保绑定正确IP。 1. **查找本机IP地址**: - 方法A:按`Win+R`,输入`cmd`打开命令提示符,执行`ipconfig`,找到`IPv4地址`(如`192.168.1.2`)[^2][^4]。 - 方法B:在“控制面板 > 网络和共享中心 > 网络连接”中查看活动网络的IPv4地址[^2]。 2. **修改vue.config.js文件**: -Vue项目根目录下创建或编辑`vue.config.js`文件。 - 添加以下配置(替换`public`值为你的IP和端口): ```javascript module.exports = { devServer: { host: '0.0.0.0', // 允许所有主机访问 public: '192.168.1.2:8080', // 改为你的IP和端口(如192.168.1.2:8080) port: '8080', // 端口号 https: false, // 禁用HTTPS disableHostCheck: true, // 关闭主机检查 open: false // 不自动打开浏览器 } }; ``` - **注意**:`public`字段必须与`ipconfig`显示的IP一致;如果网络切换(如从Wi-Fi换到热点),需更新IP[^2][^4][^5]。 3. **重启项目**: - 在VSCode终端运行: ```bash npm run serve ``` - 检查终端输出,Network应显示可用IP(如`http://192.168.1.2:8080`)。 #### 方法2: 禁用多余网络适配器 如果多个网卡导致冲突,精简网络配置。 1. 打开“控制面板 > 网络和共享中心 > 更改适配器设置”。 2. 禁用所有未使用的网络连接(如虚拟机网卡、蓝牙网络),只保留当前活动的连接(如Wi-Fi)[^1][^2]。 3. 重启VSCode并重新运行`npm run serve`。 #### 方法3: 修复系统环境变量 若上述无效,可能是系统Path变量缺失关键路径。 1. 打开环境变量设置: - `Win+R`输入`sysdm.cpl` → 高级 → 环境变量。 - 或在“设置 > 系统 > 高级系统设置”中找到[^3]。 2. 编辑系统变量: - 在“系统变量”列表中选择`Path` → 点击“编辑”。 - 添加新条目:`C:\Windows\System32\Wbem`(确保无拼写错误)[^1][^3][^5]。 3. 保存并重启: - 保存所有更改,重启电脑(或至少重启VSCode)。 - 重新运行项目,查看Network状态。 --- ### 验证问题解决 - **成功标志**:终端运行`npm run serve`后,Network显示类似`Network: http://192.168.1.2:8080`。 - **测试访问**:在同一局域网的手机或其他电脑,浏览器输入`http://<你的IP>:8080`,应能访问项目- **常见失败原因**: - IP地址错误:确保`public`字段IP与`ipconfig`一致[^4]。 - 防火墙阻拦:临时禁用防火墙测试。 - Vue版本问题:Vue CLI需更新至最新(运行`npm update -g @vue/cli`)。 > **注意**:这些方法基于Vue社区常见实践,成功率较高。如果问题持续,建议检查项目依赖(`npm install`)或操作系统更新[^1][^3][^5]。 --- ### 相关问题 1. **如何查找本机的准确IP地址?** 2. **Vue2的devServer还有哪些常用配置选项?** 3. **如果环境变量修复无效,还有什么其他解决方案?** 4. **Network: unavailable问题是否在Vue3中也存在?如何解决?** [^1]: 多个网卡原因或环境变量问题可能导致此错误,需禁用多余网络或添加Wbem路径到Path变量。 [^2]: 配置devServer的public字段是关键,IP地址需通过ipconfig或网络中心获取。 [^3]: 系统环境变量中添加C:\Windows\System32\Wbem可修复网络管理功能缺失。 [^4]: public字段必须与当前网络IP一致,切换网络后需更新。 [^5]: 在devServer中设置disableHostCheck: true有助于绕过主机检查。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值