☰

设备模拟器

一个用于模拟设备UA和屏幕参数的工具，支持预设设备和自定义参数

  1. /* ==UserStyle==
  2. @name           设备模拟器
  3. @namespace      github.com/yourusername
  4. @version        1.0.0
  5. @description    一个用于模拟设备UA和屏幕参数的工具，支持预设设备和自定义参数
  6. @author         Your name
  7. @license        MIT
  8. @preprocessor   default
  9. ==/UserStyle== */
  10.  
  11. /* 确保脚本在文档开始时运行 */
  12. @-moz-document domain("*") {
  13.     (function() {
  14.         'use strict';
  15.  
  16.         // 预设设备列表
  17.         const presetDevices = {
  18.             'iPhone 13': {
  19.                 userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1',
  20.                 width: 390,
  21.                 height: 844,
  22.                 pixelRatio: 3
  23.             },
  24.             'Samsung Galaxy S21': {
  25.                 userAgent: 'Mozilla/5.0 (Linux; Android 12; SM-G991B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.104 Mobile Safari/537.36',
  26.                 width: 360,
  27.                 height: 800,
  28.                 pixelRatio: 3
  29.             },
  30.             'iPad Pro': {
  31.                 userAgent: 'Mozilla/5.0 (iPad; CPU OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1',
  32.                 width: 1024,
  33.                 height: 1366,
  34.                 pixelRatio: 2
  35.             }
  36.         };
  37.  
  38.         // 创建悬浮窗
  39.         function createFloatingWindow() {
  40.             const container = document.createElement('div');
  41.             container.style.cssText = `
  42.                 position: fixed;
  43.                 top: 20px;
  44.                 right: 20px;
  45.                 background: white;
  46.                 border: 1px solid #ccc;
  47.                 border-radius: 5px;
  48.                 padding: 10px;
  49.                 z-index: 9999;
  50.                 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  51.                 transition: transform 0.3s;
  52.                 transform: translateX(calc(100% - 30px));
  53.             `;
  54.  
  55.             // 创建切换按钮
  56.             const toggleBtn = document.createElement('button');
  57.             toggleBtn.textContent = '◀';
  58.             toggleBtn.style.cssText = `
  59.                 position: absolute;
  60.                 left: 0;
  61.                 top: 50%;
  62.                 transform: translateY(-50%);
  63.                 border: none;
  64.                 background: #007bff;
  65.                 color: white;
  66.                 padding: 5px;
  67.                 cursor: pointer;
  68.                 border-radius: 3px 0 0 3px;
  69.             `;
  70.  
  71.             // 创建内容区域
  72.             const content = document.createElement('div');
  73.             content.style.cssText = `
  74.                 width: 300px;
  75.                 padding: 10px;
  76.             `;
  77.  
  78.             // 设备选择下拉框
  79.             const deviceSelect = document.createElement('select');
  80.             deviceSelect.style.cssText = 'width: 100%; margin-bottom: 10px; padding: 5px;';
  81.             Object.keys(presetDevices).forEach(device => {
  82.                 const option = document.createElement('option');
  83.                 option.value = device;
  84.                 option.textContent = device;
  85.                 deviceSelect.appendChild(option);
  86.             });
  87.  
  88.             // 自定义输入区域
  89.             const customInputs = document.createElement('div');
  90.             customInputs.innerHTML = `
  91.                 <input type="text" id="customUA" placeholder="User Agent" style="width: 100%; margin-bottom: 5px; padding: 5px;">
  92.                 <input type="number" id="customWidth" placeholder="宽度" style="width: 48%; margin-bottom: 5px; padding: 5px;">
  93.                 <input type="number" id="customHeight" placeholder="高度" style="width: 48%; margin-bottom: 5px; padding: 5px; float: right;">
  94.                 <input type="number" id="customPixelRatio" placeholder="像素比" style="width: 100%; margin-bottom: 5px; padding: 5px;">
  95.                 <button id="applyCustom" style="width: 100%; padding: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">应用设置</button>
  96.             `;
  97.  
  98.             // 组装悬浮窗
  99.             content.appendChild(deviceSelect);
  100.             content.appendChild(customInputs);
  101.             container.appendChild(toggleBtn);
  102.             container.appendChild(content);
  103.             document.body.appendChild(container);
  104.  
  105.             // 切换悬浮窗显示/隐藏
  106.             let isExpanded = false;
  107.             toggleBtn.addEventListener('click', () => {
  108.                 isExpanded = !isExpanded;
  109.                 container.style.transform = isExpanded ? 'translateX(0)' : 'translateX(calc(100% - 30px))';
  110.                 toggleBtn.textContent = isExpanded ? '▶' : '◀';
  111.             });
  112.  
  113.             // 应用设备设置
  114.             function applyDeviceSettings(settings) {
  115.                 // 保存设置到本地存储
  116.                 GM_setValue('deviceSettings', settings);
  117.                 
  118.                 // 修改 User Agent
  119.                 Object.defineProperty(navigator, 'userAgent', {
  120.                     get: function() { return settings.userAgent; }
  121.                 });
  122.  
  123.                 // 修改屏幕参数
  124.                 Object.defineProperty(window, 'innerWidth', {
  125.                     get: function() { return settings.width; }
  126.                 });
  127.                 Object.defineProperty(window, 'innerHeight', {
  128.                     get: function() { return settings.height; }
  129.                 });
  130.                 Object.defineProperty(window, 'devicePixelRatio', {
  131.                     get: function() { return settings.pixelRatio; }
  132.                 });
  133.  
  134.                 // 刷新页面
  135.                 location.reload();
  136.             }
  137.  
  138.             // 设备选择事件
  139.             deviceSelect.addEventListener('change', (e) => {
  140.                 const selectedDevice = presetDevices[e.target.value];
  141.                 if (selectedDevice) {
  142.                     applyDeviceSettings(selectedDevice);
  143.                 }
  144.             });
  145.  
  146.             // 自定义设置事件
  147.             document.getElementById('applyCustom').addEventListener('click', () => {
  148.                 const customSettings = {
  149.                     userAgent: document.getElementById('customUA').value || navigator.userAgent,
  150.                     width: parseInt(document.getElementById('customWidth').value) || window.innerWidth,
  151.                     height: parseInt(document.getElementById('customHeight').value) || window.innerHeight,
  152.                     pixelRatio: parseFloat(document.getElementById('customPixelRatio').value) || window.devicePixelRatio
  153.                 };
  154.                 applyDeviceSettings(customSettings);
  155.             });
  156.  
  157.             // 恢复之前的设置
  158.             const savedSettings = GM_getValue('deviceSettings');
  159.             if (savedSettings) {
  160.                 applyDeviceSettings(savedSettings);
  161.             }
  162.         }
  163.  
  164.         // 初始化
  165.         createFloatingWindow();
  166.     })();
  167. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址