今天忘了带鼠标，正巧笔记本电脑的触摸板驱动坏了，一时也用不了，所以想到用 iPhone 当作电脑的触控板来用。电脑操作系统是 Windows。

一、电脑上下载并安装 Remote Helper（此步需要会使用纯键盘来操作电脑，常用的键是 TAB、方向键、回车键）

二、手机上 App Store 中搜索并获取 鼠标·键盘

电脑和手机需要连接同一局域网，如果没有局域网，可以将电脑连接 iPhone 的热点。

打开 App，搜索 PC，授权，就可以控制光标了。

如果电脑未显示光标，尝试双击 CTRL 键来确定当前光标的位置，前提是安装了 PowerToys。

1. 确认 iPhone 开启画中画功能：

   设置 -> 通用 -> 画中画 -> 自动开启画中画

2. 确认抖音开启画中画功能：

   我 -> ≡（在右上角） -> 设置 -> 播放设置 -> 开启画中画相关选项

3. 确认直播间开启画中画功能：

   进入直播间 -> …（在右下角） -> 直播设置 -> 开启小窗相关选项
   

使用远程桌面连接时提示你的凭据不工作：

解决方法一：关闭 Windows Defender Credential Guard

1. 打开组策略编辑器（gpedit.msc）

2. 展开：计算机配置 - 管理模板 - 系统 - Device Guard，双击右侧的“打开基于虚拟化的安全”，改为“已禁用”

3. 重启电脑

解决方法二【推荐】：使用其他远程桌面客户端

在 Microsoft Store 中查找“Microsoft 远程桌面”，或者点此安装

这个应用同样来自微软，使用方式与传统的远程桌面连接略有区别，如果你在 iPhone 或安卓上使用过，那么就能快速上手。

若要共享剪贴板，在“编辑电脑”中开启，并且在 设置 - 隐私与安全 - 文件系统 中允许“远程桌面”。

相对于传统的远程桌面连接，对高 DPI 兼容性不完美。

首先，我们需要找到手机和充电器都支持的电压。然后，在这些电压下，我们选择它们都支持的最大电流。这样，我们就可以得到每个电压下的最大功率（电压乘以电流）。最后，我们在所有电压下的最大功率中选择最大的那个，得到实际的充电功率。

以 iPhone 14 为例，它支持的电压档位：5V1A 或 5.2V2.4A 或 9V3A 或 14.5V2A。

若某款充电器支持的电压档位：5V3A 或 9V3A 或 12V3A 或 15V3A 或 20V2.5A。

那么共同支持的电压为 5V 和 9V。

5V 时共同支持的最大电流为 1A，9V 时共同支持的最大电流为 3A。

所以在 5V*1A 和 9V*3A 中取较大的，即 27W，在 9V3A 的电压电流下工作。

当然，以上内容基于两者支持相同的充电协议。

本文图片基于网络图片更新，如有侵权，请通过网站底部联系站长删除。

本文内容来源于网络，如有错误欢迎批评指正。

USB 接口类型

USB 接口有 Mini、Micro、Type 三种外观。

• 通常说的 USB-C 一般指 USB Type-C，因为没有 Mini-C 和 Micro-C。而 USB-A / USB-B 一般也特指 Type-A / Type-B。

数据传输能力

USB 标准（附 Thunderbolt）

数据参考

• Thunderbolt / 雷雳 / 雷电 是同一个意思，而闪电接口指的是 Lightning，都是区别于 USB 的传输技术
  

• Thunderbolt 本身是数据传输和显示协议，Thunderbolt 3 起采用 USB-C 外观，支持 PD 协议后可进行快速充电

• USB4 在基础协议上不再采用 USB 规范，转而采用英特尔已经公布的雷电3 规范，可与雷电3 完全兼容

• USB4 仅提供 Type-C 接口

• 识别不同标准的接口，比如若 Type-C 接口旁边写着 ss 和 5 表示 SuperSpeed 和 5Gbps，即 USB 3.0；插口旁边带有⚡️标志表示雷电接口。

电力传输能力

常见快充协议

• 华为 SuperCharge（FCP / SCP）、小米 Mi Turbo Charge、OPPO VOOC、vivo FlashCharge、三星 AFC 等私有协议不在此列出。

• Magsafe 电源适配器 是磁吸式有线充电接口，最大输出功率为 85W（截止2023年），用于 Macbook；

• Magsafe 充电器 是磁吸式无线充电接口，最大输出功率为 15W（截止2023年），用于 iPhone，不属于快充。

• Qi 是无线充电协议，Qi1 最大输出功率为 7.5W，Qi2 最大输出功率为 15W。

• 功率决定充电速度，功率与电压电流的关系：P=U*I，如 5V1A=5W

• 一条 USB 线由插座/母口（Receptacle）、插头/公口（Plug）和线缆（Cable）三部分组成，要实现某个协议，需要插座和插头都支持该协议。

• PPS：Programmable Power Supply 可编程电源

• SPR：Standard Power Range 标准功率范围

• EPR：Extended Power Range 扩展功率范围

• FCP：Fast Charge Protocol 华为早期快充协议，支持 18W

• SCP：Super Charge Protocol 华为超级快充协议，支持 22.5W、40W
  

使用后置摄像头直播时，“画面镜像”不可设置。

将“镜头翻转”切换到前置摄像头后进入“功能设置”切换“画面镜像”。

特别注意，必须在开启直播时才能进行设置！

前提：

• 监控摄像头有推流功能

• 抖音有直播权限（粉丝数超过 1000）

• 一个已备案的域名
  

名词解释：

推流地址：由阿里云生成的接收摄像头视频流推送的地址。

播流地址：由阿里云生成可用于终端播放的视频流地址。

各环节功能解释：

摄像头：负责采集视频信息，并推送到阿里云。

阿里云视频直播服务：接收视频推流并分发到用户端（收费）。

OBS 软件：负责将视频流转化为可供直播伴侣调用的视频源。

直播伴侣：将视频源分发到短视频终端用户。

第一步：配置阿里云视频直播服务

1.1 在阿里云控制台中开通视频直播，在域名管理中添加域名。

这里需要添加两个域名，一个是推流域名，一个是播流域名。顾名思义，“推流”指从摄像头将流推送到阿里云，“播流”是用户播放视频流。

以添加域名推流域名“rtmp.xoyozo.net”和播流域名“live.xoyozo.net”为例：

然后按列表中的 CNAME 地址对域名作解析即可。

解析生效后，点击任意一个域名进行配置，将推流域名和播流域名相互绑定。成功后，可以在推流域名中的播流信息中看到播流域名，在播流域名的推流信息中也能看到推流域名。

1.2 生成推流地址/播流地址

在工具箱中点击地址生成器。

选择推流域名和播流域名，AppName 和 StreamName 任意填写，生成成功后获取以下地址：

注：鉴权串是按照鉴权规则生成的串，默认有效期 30 分钟，超出时间即中断推流。可以在域名管理中修改该值，或直接关闭 URL 鉴权。

第二步：在摄像机控制面板中配置推流域名

该步骤因摄像机的品牌和型号不同而有所差异。本文以 IP CAMERA 为例。

首先使用 IP 搜索工具在局域网上搜索摄像机，找到摄像机的 IP 地址。

在浏览器上打开，输入用户名和密码进入管理面板。

在“参数设置”-“网络设置”- RTMP Publish 中，将推流地址填入到“预定网址”中，点击“应用”。

刷新后查看“直播状态”和“直播网址”是否已生效。

若配置成功，可将播流地址在视频播放器中打开观看，或直接在 iPhone 或安卓手机中打开播流地址。

第三步：使用 OBS Studio 将直播流信号转换为虚拟摄像头信号

因抖音直播伴侣无法使用播流地址作为视频源进行直播输出，故使用 OBS 将播流信号转化为虚拟的本机摄像头信号源供直播伴侣调用。

下载安装 OBS Studio，添加一个“场景”：

然后添加一个“媒体源”：

去掉“本地文件”前面的勾，将播流地址填到“输入”框中：

确定后即可预览到直播内容：

拖动视频区域可调整输出范围。

点击“启动虚拟摄像机”。

提示：OBS 创建的虚拟摄像机默认会从物理麦克风和桌面系统音频拾音，请按需在“混音器”中配置。

第四步：OBS 使用 VLC 视频源（此步可略过）

若 OBS 直接添加媒体源不稳定，可以使用 VLC 视频源。

下载安装 VLC 播放器。

在 OBS Studio 中添加来源，选择“VLC 视频源”：

点击“播放列表”右侧的“+”，选择“添加路径 /URL”：

填写播流地址并确定。

第五步：配置抖音直播伴侣使用 OBS 的虚拟摄像机信号源

下载安装抖音直播伴侣，在任意场景中添加素材，选择“摄像头”：

摄像头选择“OBS Virtual Camera”：

点击“开始直播”：

下一步：如何配置视频号/微博直播的推流直播监控摄像头画面

iPhone 或安卓上传的照片，可能因横向或纵向拍摄，导致上传后照片显示成 90 度、180 度、270 度角旋转，使用 C# 处理该照片时同样会遇到相同的问题。

解决的方案：

客户端使用 base64 显示图片，可按正常方向显示，且不通过服务端即时显示。关键代码：

$('#file_input').change(function (e) {
    if (e.target.files.length == 0) { return; }
    // file 转换为 base64
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = function (event) {
        $('#myImg').attr('src', event.target.result).css({ width: 'auto', height: 'auto' });
    }
});
$('#myImg').on('load', function () {
    console.log('图片加载完成')
});

但 base64 字符串传递到服务端受请求大小限制（一般比直接 POST 文件要小）。所以显示图片的同时应即时使用 POST 方式上传图片（如 jquery.fileupload.js）。

当然如果是在微信中打开网页，使用 JS-SDK 的 wx.chooseImage() 返回的 localId 也可以在 <img /> 中正常显示，然后使用 wx.uploadImage() 上传到微信服务器并获取 serverId，在通过获取临时素材接口取回图片文件。

服务端如果需要处理该图片（缩放、裁切、旋转等），需要先读取照片的拍摄角度，旋正后，再进行处理，相关 C# 代码：

/// <summary>
/// 调整照片的原始拍摄旋转角度
/// </summary>
/// <param name="img"></param>
/// <returns></returns>
private Image ImageRotateFlip(Image img)
{
    foreach (var prop in img.PropertyItems)
    {
        if (prop.Id == 0x112)
        {
            switch (prop.Value[0])
            {
                case 6: img.RotateFlip(RotateFlipType.Rotate90FlipNone); break;
                case 3: img.RotateFlip(RotateFlipType.Rotate180FlipNone); break;
                case 8: img.RotateFlip(RotateFlipType.Rotate270FlipNone); break;
            }
            prop.Value[0] = 1;
        }
    }
    return img;
}

使用 JS 根据屏幕宽度来计算页面尺寸和字体大小并不是一个好办法。

rem 单位是跟随网页根元素的 font-size 改变而自动改变的，是一个相对的长度单位，非常适合在不同手机界面上自适应屏幕大小。 

一般的手机浏览器的默认字体大小为 16px。即：

:root { font-size: 16px; } /* 在 HTML 网页中，:root 选择器相当于 html */

也就是说，如果我定义一个宽度为 1rem，那么它的实际宽度为 16px。反过来说，如果设计稿宽度为 1000px，那么相当于 1000÷16=62.5‬rem。因此，我们设置一个 62.5rem 的宽度，即可正常显示 1000px 的设计效果。

为了适应不同屏幕尺寸的手机，只需按比例换算更改 :root 的 font-size 即可。这个比例是由“窗口宽度 ÷ 设计稿宽度”得到的，姑且称它为“窗设比”。

以 iPhone X 逻辑宽度 375px 为例，设计稿宽度 1000px 时，窗设比为：0.375。:root 的 font-size 将会被重置为 16 * 0.375 = 6px。上面的 62.5rem 宽度将对应 iPhone X 宽度为 62.5 * 6 = 375px，正好是屏幕逻辑宽度。

根据这个思路，理论上，我们只需要使用 CSS 将 :root 的 font-size 设置为 1px，然后使用 JS 重置为与“窗设比”相乘的积（本例中将被重置为 0.375px）。这样，我们可以不通过换算，只需要更改单位，将设计稿中的 500px 直接写入到 CSS 为 500rem，即可实现在 iPhone X 上显示逻辑宽度为（500 * 0.375 =）187.5px，即设计稿中的 1/2 宽度对应到屏幕上 1/2 的宽度。

实际上，部分安卓手机（如华为某旗舰机）不支持 :root 的 font-size 小于 12px，其它一些浏览器也会出现小于 12px 的文字以 12px 显示。

为了避免在任何环节出现小于 12px 的 font-size 值，且不增加设计稿尺寸到 CSS 数值的换算难度，我们设计了以下思路：

1. 约定“设样比（设计稿的 px 值与 CSS 的 rem 值的比）”为 100；

2. 使用 JS 将 :root 的 font-size 重置为“设样比”与“窗设比（窗口宽度 ÷ 设计稿宽度）”的乘积；

3. 计算 CSS 时的 rem 值只需从设计稿中获取 px 值再除以“设样比”100 即可。 

这样做的另一个好处是，不用要求设计师必须按多少尺寸来设计，当然按主流尺寸来建议是可行的。

完整代码（jQuery 版）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app { margin: 0 auto; background-color: #EEE; display: none; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app">
        <div class="whole">100%</div>
        <div class="half">50%</div>
        <div class="half2">50%</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // [函数] 重置尺寸
        function fn_resize() {
            // 设计稿宽度（px）
            var designsWidth = 1000;
            // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
            var px2rem = 100;
            // 限制 #app 的最大宽度为设计稿宽度
            $('#app').css('max-width', designsWidth).css('min-height', $(window).height());
            // 重置 :root 的 font-size
            var appWidth = Math.min($(window).width(), designsWidth);
            $(':root').css('font-size', px2rem * appWidth / designsWidth);
            $('#app').show();
        }
        // 页面加载完成后重置尺寸
        $(fn_resize);
        // 改变窗口大小时重置尺寸
        $(window).resize(fn_resize);
    </script>
</body>
</html>

完整代码（Vue2 版）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app { margin: 0 auto; background-color: #EEE; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px' }" style="display: none;" v-show="appShow">
        <div class="whole">100%</div>
        <div class="half">50%</div>
        <div class="half2">50%</div>
        <div>appWidth: {{ appWidth }}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // 设计稿宽度（px）
                designsWidth: 1000,
                // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
                px2rem: 100,
                // #app 的 width
                appWidth: 0, // 勿改
                appMinHeight: 0, // 勿改
                appShow: false, // 勿改
            },
            mounted: function () {
                // 页面加载完成后重置尺寸
                this.fn_resize();
                const that = this;
                // 改变窗口大小时重置尺寸
                window.onresize = () => {
                    return (() => {
                        console.log('RUN window.onresize()');
                        that.fn_resize();
                    })();
                };
            },
            watch: {
                // 侦听 appWidth 更改 root 的 font-size
                appWidth: function () {
                    console.log('RUN watch: appWidth');
                    var root = document.getElementsByTagName("html")[0];
                    root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
                    this.appShow = true;
                }
            },
            methods: {
                fn_resize: function () {
                    console.log('RUN methods: fn_resize()');
                    this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
                    this.appMinHeight = document.documentElement.clientHeight;
                }
            }
        });
    </script>
</body>
</html>

完整代码（Vue3 版）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app > div { display: none; margin: 0 auto; background-color: #EEE; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app">
        <div style="display: none;" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px', display: appShow ? 'block' : 'none' }">
            <div class="whole">100%</div>
            <div class="half">50%</div>
            <div class="half2">50%</div>
            <div>appWidth: {{ appWidth }}</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    // 设计稿宽度（px）
                    designsWidth: 1000,
                    // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
                    px2rem: 100,
                    // #app 的 width
                    appWidth: 0, // 勿改
                    appMinHeight: 0, // 勿改
                    appShow: false, // 勿改
                }
            },
            mounted: function () {
                // 页面加载完成后重置尺寸
                this.fn_resize();
                const that = this;
                // 改变窗口大小时重置尺寸
                window.onresize = () => {
                    return (() => {
                        console.log('RUN window.onresize()');
                        that.fn_resize();
                    })();
                };
            },
            watch: {
                // 侦听 appWidth 更改 root 的 font-size
                appWidth: function () {
                    console.log('RUN watch: appWidth');
                    var root = document.getElementsByTagName("html")[0];
                    root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
                    this.appShow = true;
                }
            },
            methods: {
                fn_resize: function () {
                    console.log('RUN methods: fn_resize()');
                    this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
                    this.appMinHeight = document.documentElement.clientHeight;
                }
            }
        });
        const vm = app.mount('#app');
    </script>
</body>
</html>

示例中 CSS 初始 :root 的 font-size 为 16px（一个较小值，防止页面加载时瞬间出现大号文字影响用户体验），经过 fn_resize 后，:root 的 font-size 被设置为（100 * 375 / 1000 =）37.5px（iPhone X 中），那么宽度为 1000px 的设计稿中的 500px 换算到 CSS 中为 5rem，也即 37.5 * 5 = 187.5px，就是 iPhone X 的屏幕宽度的一半。

示例中 id 为 app 的 div 是用来在 PC 浏览器中限制页面内容最大宽度的（类似微信公众号发布的文章），如果网页不需要在 PC 端显示，jQuery 版代码中的 $('#app').width() 可以用 $(window).width() 来代替。

这个 div#app 一般设计有背景色，用于在宽度超过设计稿的设备上显示时区别于 body 的背景。但是当网页内容不超过一屏时，div#app 高度小于窗口，示例中与 appMinHeight 相关的代码就是为了解决这个问题。

示例中 div#app 隐藏/显示相关代码用于解决在页面加载初期由于 font-size 值变化引起的一闪而过的排版错乱。

最后补充一点，如果改变窗口大小时涉及执行耗时的操作，为避免页面卡顿，可以参考这篇文章添加函数防抖：https://xoyozo.net/Blog/Details/js-function-anti-shake

确保磁盘未满，否则会提示各种无法连接。

1. 在“小米WiFi”App 中开启对应路由器的“SAMBA 协议”（工具箱 - 更多工具 - SAMBA）。

2. 在“小米WiFi”App 中开启相应电脑或设备的“全盘访问”。

3. 通过 miwifi.com 下载安装 PC 客户端。

4. 打开“此电脑”，“映射网络驱动器”或“添加一个网络位置”，填写路由器的地址和目录，如：“\\192.168.31.1\下载”。

5. 如果上一步无法成功添加，那么首先需要检查 samba 服务器是否正常，可以在 iPhone 上安装“Remote File Manager”来验证。

6. 如果 iPhone 连接正常，那么在电脑上打开“本地组策略编辑器”（命令行：gpedit.msc），在“计算机配置 - 管理模板 - 网络 - Lanman 工作站”右侧，双击“启用不安全的来宾登录”，改为“已启用”。Win7 用户参考此文。

注意：电脑必须运行 PC 客户端才能访问小米路由器硬盘。