手机上网课屏幕太小快看瞎了？三招用上大屏幕

PConline 技巧]由于疫情缘故，现在各大中小学都开始了网上上课。由于课件多为手机版本，这就让很多家长犯了难。用手机吧，屏幕太小太费眼，用平板吧，又不是每个家庭都有。那么遇到这种情况该怎么办呢？下面三组小技巧相信可以帮到您！

1. 最简单的办法——投屏到电视上

很多家庭都有智能电视（机顶盒），那么最简单的一个方法，就是利用手机投屏功能，直接将画面投送到电视上，具体步骤如下：

1）电视端（以某米盒子为例）

启动盒子，进入“我的应用>无线投屏”；

根据自己的手机类型点选对应按钮，比如小编的手机是Android系统，那么就点击其中的“Miracast”，如果是苹果机，则要选择“iPhone投屏”；

稍后等屏幕弹出“等待连接……”的提示后，就可以配置手机端了；

盒子打开“Miracast”（以Android手机为例）

2）手机端（以MIUI 11系统为例）

打开“设置>连接与共享>投屏”，勾选“打开投屏”；

打开手机投屏

在手机列出的可投屏设备中，点击自己的电视。连接成功后，手机屏幕便被成功投影到电视上了。此时打开课件，就可以直接利用电视来学习了；

投影成功后，手机屏幕就被同步到电视上了

此外如果学校使用的是钉钉直播，也可以直接在直播面板点击“投屏”按钮。不用其他设置，就能将直播画面直接投影到电视中。

钉钉自带投屏功能更加方便

2. 没电视的用这招——安装安卓模拟器

如果家里没有智能电视，也可以用电脑来替代，方法是安装一款安卓模拟器。

1）首先下载一款安卓模拟器，名称不限，这里以“夜神模拟器”为例；

夜神模拟器下载：https://dl.pconline.com.cn/download/360860.html

2）启动模拟器，电脑屏幕上会出现一个类似手机的小界面，点击“应用中心”，下载你所需要的课件APP；

模拟器装好后效果

3） APP装好后，双击就能在模拟器中打开了，操作方法和在手机中一样。由于多数模拟器都支持横纵转屏，实际效果还是挺不错的；

在Windows中使用模拟器打开课件APP效果

如果你使用的是Win10系统，且电脑购买时较新，那么还可以借助Miracast直接将手机屏幕投影到电脑中。整个过程和投影到电视很像，只要将Win10设置里的“投影到此电脑”选项打开即可，稍后在手机的投影菜单中便能看到电脑了。

除了投影到电视，手机屏幕也能投影到电脑中（本功能需Win10系统支持，同时无线网卡也不能太老）

3. 终极方法——直接装个安卓双系统

虽然模拟器可以让APP在Windows里运行，但性能损失很大。对于这一块要求高的小伙伴，也可以安装一套“Android系统”，与现有的Windows组成双系统使用，并不会影响原来的文件系统。

1）下载“凤凰OS”安装包，点击“一键安装”将它装到硬盘中；

2）重新启动电脑，在开机选单中选择“Phoenix OS”；

3）凤凰OS的界面很像Linux，上手比较容易。同时它也是一个不折不扣的Android平台，能够高效率地运行各种Android 应用；

凤凰OS

4）启动应用商店，下载并装好所需的课件APP，直接学习即可；

写在最后

以上三种方法各有利弊，大家可以根据自己的实际情况加以选择。总之方法总会比问题多，有需要的小伙伴赶快去试一试吧。

决胜移动端：H5页面如何一键禁用双击放大、双指缩放与整体缩放功能】

在移动互联网时代，H5页面以其跨平台兼容性和丰富的交互特性，成为众多开发者构建移动端应用的首选。然而，在实际使用过程中，用户可能会遇到双击放大、双指缩放或整体缩放等操作带来的困扰，尤其是在一些特定场景下（如游戏、阅读、绘图等），这些默认的缩放行为可能会影响用户体验。本文将深入解析如何通过CSS和JavaScript，一键禁用H5页面的双击放大、双指缩放及整体缩放功能，助您打造更为稳定、流畅的移动端交互体验。

一、理解移动端缩放机制

1. 双击放大（Double Tap Zoom）

双击放大是浏览器对移动端设备的默认响应行为，当用户快速连续点击屏幕两次时，浏览器会自动将页面内容放大到一个预设的缩放比例，以便用户查看细节。

2. 双指缩放（Pinch Zoom）

双指缩放是利用多点触控技术，通过两个手指在屏幕上做开合动作来实现页面内容的放大或缩小。这是移动设备上非常常见的交互方式，适用于查看图片、地图等需要精细操作的场景。

3. 整体缩放（Meta Viewport Scaling）

整体缩放主要由`<meta>`标签中的`viewport`属性控制，它定义了浏览器在渲染网页时应如何调整其布局和缩放。例如，设置`initial-scale=1`意味着初始缩放比例为1:1，即网页内容与设备宽度保持一致。

二、禁用双击放大

1. 使用CSS属性

css
body {
  touch-action: manipulation;
}

在CSS中，可以利用`touch-action`属性来控制元素的触摸交互行为。将其设置为`manipulation`，即可禁用双击放大：

2. 通过JavaScript阻止事件冒泡

javascript
document.addEventListener('dblclick', function(event) {
  event.preventDefault();
});

对于更复杂的应用场景，可能需要在JavaScript中处理双击事件，防止其触发浏览器的默认放大行为：

三、禁用双指缩放

javascript
let initialTouchStartY=0;
let initialTouchStartX=0;

document.addEventListener('touchstart', function(event) {
  if (event.touches.length > 1) {
    event.preventDefault(); // 阻止默认行为，包括双指缩放
    initialTouchStartY=event.touches[0].clientY;
    initialTouchStartX=event.touches[0].clientX;
  }
});

document.addEventListener('touchmove', function(event) {
  if (event.touches.length > 1) {
    event.preventDefault(); // 阻止默认行为，包括双指缩放
    const currentTouchY=event.touches[0].clientY;
    const currentTouchX=event.touches[0].clientX;
    const diffY=Math.abs(currentTouchY - initialTouchStartY);
    const diffX=Math.abs(currentTouchX - initialTouchStartX);

    // 如果双指滑动距离过小，可能是误触，允许正常滚动
    if (diffY < 10 && diffX < 10) return;

    // 否则，阻止所有滚动行为
    event.stopPropagation();
  }
});

document.addEventListener('touchend', function(event) {
  if (event.touches.length > 0) {
    event.preventDefault(); // 阻止默认行为，包括双指缩放
  }
});

要禁用双指缩放，通常需要借助于JavaScript监听`touchstart`、`touchmove`和`touchend`事件，并在`touchmove`事件处理器中阻止默认行为：

四、控制整体缩放

1. 设置合理的viewport meta标签

html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

在HTML文档的`<head>`部分添加以下`<meta>`标签，确保页面初始缩放比例为1，且禁止用户手动缩放：

2. 使用CSS媒体查询优化布局

css
@media screen and (max-width: 768px) {
  /* 在小屏设备上的布局调整 */
}

@media screen and (orientation: landscape) {
  /* 横屏模式下的布局调整 */
}

结合CSS媒体查询，根据不同的设备宽度和屏幕方向动态调整布局，确保内容在各种屏幕尺寸下都能良好展示，从而降低用户主动缩放的需求：

五、实战案例：禁用缩放功能的完整H5页面示例

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <style>
    body {
      touch-action: manipulation;
    }
  </style>
  <script>
    document.addEventListener('dblclick', function(event) {
      event.preventDefault();
    });

    let initialTouchStartY=0;
    let initialTouchStartX=0;

    document.addEventListener('touchstart', function(event) {
      if (event.touches.length > 1) {
        event.preventDefault();
        initialTouchStartY=event.touches[0].clientY;
        initialTouchStartX=event.touches[0].clientX;
      }
    });

    document.addEventListener('touchmove', function(event) {
      if (event.touches.length > 1) {
        event.preventDefault();
        const currentTouchY=event.touches[0].clientY;
        const currentTouchX=event.touches[0].clientX;
        const diffY=Math.abs(currentTouchY - initialTouchStartY);
        const diffX=Math.abs(currentTouchX - initialTouchStartX);

        if (diffY < 10 && diffX < 10) return;

        event.stopPropagation();
      }
    });

    document.addEventListener('touchend', function(event) {
      if (event.touches.length > 0) {
        event.preventDefault();
      }
    });
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

为了便于理解和实践，以下是一个包含了禁用双击放大、双指缩放及整体缩放功能的完整H5页面示例：

六、结语

通过以上步骤，您已经掌握了在H5页面中一键禁用双击放大、双指缩放及整体缩放功能的方法。合理运用这些技巧，不仅能提升移动端用户的浏览体验，还能避免因不必要的缩放导致的布局错乱等问题。在实际项目中，还需结合具体业务需求，灵活调整代码实现，以达到最佳效果。希望本文能为您的移动端H5开发之路提供有力支持，助您决胜移动端！

在微软员工已经陆续返回工作岗位，迎接2016年新任务，其中最重要的当属Win10Redstone系统更新。许多消息表明，Win10 RS1将解决Win10正式版早期遗留的问题，并增加众多新功能。

对于Windows10Redstone，微软对于细节还是保持谨慎。不过Windows工程师和开发者将会谈及到Windows系统显示缩放问题。在CES2016上，大会展示了很多PC和类PC设备，即将在今年上市。不幸的是，很多用户依然抱怨Windows系统不佳的显示缩放，缺乏标准化扩展，不过Win10 Redstone有望成功解决这个问题。

在nsider Hub中有一系列叫做Made by you（由你做主），Windows团队谈到在Win10系统中显示缩放的处理细节。

“对于开放的Windows系统来说，显示缩放是一个复杂的问题，必须支持4英寸到84英寸不同尺寸的设备。DPI范围需要50DPI到500DPI。在Windows10系统中巩固和简化了开发者缩放处理，提升终端用户的视觉体验。未来版本请保持关注。”

由于Windows10 insider社区提供的详细争议和真实例子，使得Windows团队可以及时看到在Win10开发中开发者药遇到的像素战争。

首先Windows团队列出了Win10显示缩放的相关专业术语包括：

? Physical Pixels（物理像素）：屏幕上的实际像素点，可以点亮屏幕的最小单位。

? Effective Pixels（有效像素）：抽象的显示单位，每一点对应着物理像素。

? Scale Factor（尺寸缩放比例系数）：有效像素与物理像素之间的比例对应，大约相当于有效分辨率与物理分辨率之间的比率。

? Dynamic Scaling（动态缩放）：基本上现在的Modern应用遵循了这项原则，可以根据显示和窗口尺寸进行切换和内容调整。即使是投影、对接和不同显示器中移动应用，使用远程连接窗口。

大多数Windows用户已经知道或有所了解，在高分辨率屏幕上，UWP应用看起来很棒，一些升级的WPF应用看起来也不错。而大多数Win32程序看起来比较模糊。

在此起点上，Windows团队采取统一内容缩放跨设备方案，将重要的系统UI缩放系统扩展到8K分辨率屏幕上，提升Windows对系统和应用内容的支持。Windows间隔缩放比例为100%、125%、150%、200%和250%。在Win8.1系统上，商店应用缩放比例可以为100%、140%和180%，不过导致并排应用之间显示不一致。对于高分屏仍然会导致“窗口太小字体看不见”的噩梦时代。

在Windows10和后续版本中，读取的缩放比例进行调整，从100%到450%，有足够的空间支持6英寸4K屏幕和上至23英寸8K显示器。

作为成果的一部分，Windows10将使常规桌面UI变得更加漂亮和清晰，即使是在400%下。

与大众想法不同的是，Windows团队也在致力于Win10 Mobile系统的显示缩放，检查移动系统的可扩展性。可以理解的是，大多数努力是适配确保UWP应用在手机和平板上正常尺寸显示，整个工作可能主要是针对UWP应用可以更好支持Continuum特性。

除了缩放系统，Windows团队还将精力放在动态缩放上，不仅仅局限在UWP HTML和XAML，还有一些UI元素，包括：

? Windows“经典”桌面UI

? 开始界面体验

? 文件管理器

? Windows任务栏

? 命令编辑器等等

? 用户缩放设置

除了上面这些，Windows团队还有很多工作要做。据传Win10红石系统将在今年夏季发布，Windows团队希望可以解决遗留的一些缩放问题。

比如大多数前窗口程序打开文件管理器时出现的选择窗口图标就与其他格格不入。微软计划在这方面做统一。

模糊的位图内容缩放

Windows团队目前正在定位的实例，特别是在Office应用。即使是Win10 UWP可以较好地扩展，但是经典桌面程序还是利用旧的Windows系统缩放，当扩展停靠到第二块屏幕时会出现位图显示模糊。这些程序包括Notepad++、Chrome和Firefox。Windows团队正在通过迁移工具改善更复杂的Win32应用程序。

最低程度上，Windows团队目前正在准备Win10基础工作，在可预见的未来进行实施。希望在Win10 Redstone上我们可以看到成果显现，期待走出解决Windows高分屏显示艰难过程的第一步。

（via: WinBeta，By KAREEM ANDERSON）

微信搜索“IT之家”关注抢6s大礼！下载IT之家客户端（戳这里）也可参与评论抽楼层大奖！

在线咨询

上一篇：网页加载进度条实现方案
下一篇：php文章万能采集（php文章万能采集）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商