手機上網課屏幕太小快看瞎了？三招用上大屏幕

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小時內與您取得聯系。

整合營銷服務商