☰

设备模拟器

模拟各种设备的 UA 和屏幕参数

  1. // ==UserScript==
  2. // @name         设备模拟器
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4
  5. // @description  模拟各种设备的 UA 和屏幕参数
  6. // @author       Your name
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @grant        GM.setValue
  12. // @grant        GM.getValue
  13. // @run-at       document-start
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.     
  19.     // 如果存在保存的设置，立即应用
  20.     const savedSettings = GM_getValue('deviceSettings', null);
  21.     if (savedSettings) {
  22.         try {
  23.             const settings = JSON.parse(savedSettings);
  24.             applySettings(settings);
  25.         } catch (e) {
  26.             console.error('加载初始设置失败:', e);
  27.         }
  28.     }
  29.  
  30.     // 预设设备列表
  31.     const presetDevices = {
  32.         'iPhone 13': {
  33.             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',
  34.             width: 390,
  35.             height: 844,
  36.             deviceScaleFactor: 3
  37.         },
  38.         'Pixel 5': {
  39.             userAgent: 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
  40.             width: 393,
  41.             height: 851,
  42.             deviceScaleFactor: 2.75
  43.         },
  44.         'iPad Pro': {
  45.             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',
  46.             width: 1024,
  47.             height: 1366,
  48.             deviceScaleFactor: 2
  49.         }
  50.     };
  51.  
  52.     // 创建悬浮窗
  53.     function createFloatingWindow() {
  54.         const container = document.createElement('div');
  55.         container.innerHTML = `
  56.             <div id="device-simulator" style="position: fixed; top: 20px; right: 20px; background: white; border: 1px solid #ccc; padding: 10px; z-index: 9999; box-shadow: 0 0 10px rgba(0,0,0,0.1); min-width: 200px;">
  57.                 <div id="simulator-header" style="cursor: move; padding: 5px; background: #f0f0f0; margin-bottom: 10px;">
  58.                     <span>设备模拟器</span>
  59.                     <button id="toggle-simulator" style="float: right;">收起</button>
  60.                 </div>
  61.                 <div id="simulator-content">
  62.                     <select id="device-select" style="width: 100%; margin-bottom: 10px;">
  63.                         <option value="">选择设备</option>
  64.                         ${Object.keys(presetDevices).map(device => `<option value="${device}">${device}</option>`).join('')}
  65.                     </select>
  66.                     <div style="margin-bottom: 10px;">
  67.                         <label>User Agent:</label>
  68.                         <textarea id="ua-input" style="width: 100%; height: 60px;"></textarea>
  69.                     </div>
  70.                     <div style="margin-bottom: 10px;">
  71.                         <label>屏幕宽度:</label>
  72.                         <input type="number" id="width-input" style="width: 100%;">
  73.                     </div>
  74.                     <div style="margin-bottom: 10px;">
  75.                         <label>屏幕高度:</label>
  76.                         <input type="number" id="height-input" style="width: 100%;">
  77.                     </div>
  78.                     <div style="margin-bottom: 10px;">
  79.                         <label>设备像素比:</label>
  80.                         <input type="number" id="scale-input" style="width: 100%;" step="0.01">
  81.                     </div>
  82.                     <button id="apply-settings" style="width: 100%;">应用设置</button>
  83.                 </div>
  84.             </div>
  85.         `;
  86.  
  87.         document.body.appendChild(container);
  88.         return container;
  89.     }
  90.  
  91.     // 初始化拖拽功能
  92.     function initializeDrag(container) {
  93.         const header = container.querySelector('#simulator-header');
  94.         let isDragging = false;
  95.         let currentX;
  96.         let currentY;
  97.         let initialX;
  98.         let initialY;
  99.  
  100.         header.addEventListener('mousedown', (e) => {
  101.             isDragging = true;
  102.             initialX = e.clientX - container.offsetLeft;
  103.             initialY = e.clientY - container.offsetTop;
  104.         });
  105.  
  106.         document.addEventListener('mousemove', (e) => {
  107.             if (isDragging) {
  108.                 currentX = e.clientX - initialX;
  109.                 currentY = e.clientY - initialY;
  110.                 container.style.left = currentX + 'px';
  111.                 container.style.top = currentY + 'px';
  112.             }
  113.         });
  114.  
  115.         document.addEventListener('mouseup', () => {
  116.             isDragging = false;
  117.         });
  118.     }
  119.  
  120.     // 初始化事件监听
  121.     function initializeEvents(container) {
  122.         const toggleBtn = container.querySelector('#toggle-simulator');
  123.         const content = container.querySelector('#simulator-content');
  124.         const deviceSelect = container.querySelector('#device-select');
  125.         const uaInput = container.querySelector('#ua-input');
  126.         const widthInput = container.querySelector('#width-input');
  127.         const heightInput = container.querySelector('#height-input');
  128.         const scaleInput = container.querySelector('#scale-input');
  129.         const applyBtn = container.querySelector('#apply-settings');
  130.  
  131.         // 加载保存的设置
  132.         const savedSettings = GM_getValue('deviceSettings', null);
  133.         if (savedSettings) {
  134.             try {
  135.                 const settings = JSON.parse(savedSettings);
  136.                 uaInput.value = settings.userAgent || '';
  137.                 widthInput.value = settings.width || '';
  138.                 heightInput.value = settings.height || '';
  139.                 scaleInput.value = settings.deviceScaleFactor || '';
  140.                 // 立即应用保存的设置
  141.                 applySettings(settings);
  142.             } catch (e) {
  143.                 console.error('加载设置失败:', e);
  144.             }
  145.         }
  146.  
  147.         // 切换显示/隐藏
  148.         toggleBtn.addEventListener('click', () => {
  149.             if (content.style.display === 'none') {
  150.                 content.style.display = 'block';
  151.                 toggleBtn.textContent = '收起';
  152.             } else {
  153.                 content.style.display = 'none';
  154.                 toggleBtn.textContent = '展开';
  155.             }
  156.         });
  157.  
  158.         // 选择预设设备
  159.         deviceSelect.addEventListener('change', () => {
  160.             const device = presetDevices[deviceSelect.value];
  161.             if (device) {
  162.                 uaInput.value = device.userAgent;
  163.                 widthInput.value = device.width;
  164.                 heightInput.value = device.height;
  165.                 scaleInput.value = device.deviceScaleFactor;
  166.             }
  167.         });
  168.  
  169.         // 应用设置
  170.         applyBtn.addEventListener('click', () => {
  171.             const settings = {
  172.                 userAgent: uaInput.value,
  173.                 width: parseInt(widthInput.value) || window.innerWidth,
  174.                 height: parseInt(heightInput.value) || window.innerHeight,
  175.                 deviceScaleFactor: parseFloat(scaleInput.value) || window.devicePixelRatio
  176.             };
  177.             
  178.             try {
  179.                 GM_setValue('deviceSettings', JSON.stringify(settings));
  180.                 applySettings(settings);
  181.                 console.log('设置已保存');
  182.             } catch (e) {
  183.                 console.error('保存设置失败:', e);
  184.             }
  185.         });
  186.     }
  187.  
  188.     // 应用设备设置
  189.     function applySettings(settings) {
  190.         try {
  191.             // 修改 User Agent
  192.             Object.defineProperty(navigator, 'userAgent', {
  193.                 get: function() {
  194.                     return settings.userAgent || navigator.userAgent;
  195.                 },
  196.                 configurable: true
  197.             });
  198.  
  199.             // 修改屏幕参数
  200.             const screenProps = {
  201.                 width: settings.width,
  202.                 height: settings.height,
  203.                 availWidth: settings.width,
  204.                 availHeight: settings.height
  205.             };
  206.  
  207.             // 修改 window 属性
  208.             Object.defineProperties(window, {
  209.                 'innerWidth': { 
  210.                     value: settings.width,
  211.                     configurable: true,
  212.                     writable: true
  213.                 },
  214.                 'outerWidth': { 
  215.                     value: settings.width,
  216.                     configurable: true,
  217.                     writable: true
  218.                 },
  219.                 'innerHeight': { 
  220.                     value: settings.height,
  221.                     configurable: true,
  222.                     writable: true
  223.                 },
  224.                 'outerHeight': { 
  225.                     value: settings.height,
  226.                     configurable: true,
  227.                     writable: true
  228.                 },
  229.                 'devicePixelRatio': { 
  230.                     value: settings.deviceScaleFactor,
  231.                     configurable: true,
  232.                     writable: true
  233.                 }
  234.             });
  235.  
  236.             // 修改 screen 属性
  237.             Object.defineProperties(screen, {
  238.                 'width': { 
  239.                     value: screenProps.width,
  240.                     configurable: true,
  241.                     writable: true
  242.                 },
  243.                 'height': { 
  244.                     value: screenProps.height,
  245.                     configurable: true,
  246.                     writable: true
  247.                 },
  248.                 'availWidth': { 
  249.                     value: screenProps.availWidth,
  250.                     configurable: true,
  251.                     writable: true
  252.                 },
  253.                 'availHeight': { 
  254.                     value: screenProps.availHeight,
  255.                     configurable: true,
  256.                     writable: true
  257.                 }
  258.             });
  259.  
  260.             // 设置 viewport
  261.             const viewportContent = `width=${settings.width}, initial-scale=1.0, user-scalable=yes, maximum-scale=1.0`;
  262.             let viewport = document.querySelector('meta[name="viewport"]');
  263.             if (viewport) {
  264.                 viewport.content = viewportContent;
  265.             } else {
  266.                 viewport = document.createElement('meta');
  267.                 viewport.name = 'viewport';
  268.                 viewport.content = viewportContent;
  269.                 document.head.appendChild(viewport);
  270.             }
  271.  
  272.             // 添加强制样式
  273.             const styleId = 'device-simulator-styles';
  274.             let styleSheet = document.getElementById(styleId);
  275.             if (!styleSheet) {
  276.                 styleSheet = document.createElement('style');
  277.                 styleSheet.id = styleId;
  278.                 document.head.appendChild(styleSheet);
  279.             }
  280.             
  281.             styleSheet.textContent = `
  282.                 :root {
  283.                     --device-width: ${settings.width}px;
  284.                 }
  285.                 
  286.                 html, body {
  287.                     overflow-x: hidden !important;
  288.                     width: var(--device-width) !important;
  289.                     min-width: var(--device-width) !important;
  290.                     max-width: var(--device-width) !important;
  291.                     margin: 0 !important;
  292.                     padding: 0 !important;
  293.                 }
  294.                 
  295.                 body > * {
  296.                     max-width: var(--device-width) !important;
  297.                 }
  298.  
  299.                 img {
  300.                     max-width: 100% !important;
  301.                     height: auto !important;
  302.                 }
  303.  
  304.                 * {
  305.                     -webkit-text-size-adjust: none !important;
  306.                     text-size-adjust: none !important;
  307.                     box-sizing: border-box !important;
  308.                 }
  309.             `;
  310.  
  311.             // 触发重绘事件
  312.             window.dispatchEvent(new Event('resize'));
  313.             window.dispatchEvent(new Event('orientationchange'));
  314.             
  315.             // 强制重新计算布局
  316.             document.documentElement.style.zoom = '99.99999%';
  317.             setTimeout(() => {
  318.                 document.documentElement.style.zoom = '100%';
  319.             }, 10);
  320.  
  321.         } catch (e) {
  322.             console.error('应用设置失败:', e);
  323.         }
  324.     }
  325.  
  326.     // 初始化
  327.     const container = createFloatingWindow();
  328.     initializeDrag(container);
  329.     initializeEvents(container);
  330.     
  331.     // 默认收起状态
  332.     container.querySelector('#simulator-content').style.display = 'none';
  333.     container.querySelector('#toggle-simulator').textContent = '展开';
  334. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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