Html5+css3+js纯前端手机网页模拟器模拟手机效果预览
·
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯前端手机网页模拟器 chalide.cn</title>
<meta name="author" content="yujianyue, 15058593138@qq.com">
<style>
/* CSS3 样式 */
:root {
--primary-color: #4285f4;
--secondary-color: #3367d6;
--background-color: #f5f5f5;
--text-color: #333;
--border-color: #ddd;
--error-color: #db4437;
--device-color: #111;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
font-size: 24px;
line-height:2;
margin: 15px 25px 0 25px;
}
.description {
font-size: 14px;
opacity: 0.9;
margin-top: 10px;
color: #666;
}
.form-group {
background: white;
padding: 5px 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 8px;
}
.input-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 5px;
}
label {
display: block;
margin-bottom: 1px;
font-weight: bold;
}
input[type="text"] {
flex: 1;
width: 99%;
padding: 6px 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 16px;
outline: none;
transition: border 0.3s;
}
input[type="text"]:focus {
border-color: var(--primary-color);
}
select {
padding: 6px 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 16px;
outline: none;
transition: border 0.3s;
width: 99%;
background-color: white;
}
select:focus {
border-color: var(--primary-color);
}
button {
background: var(--secondary-color);
color: white;
border: none;
padding: 12px 25px;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
transition: background 0.3s;
}
button:hover {
background: #2a56c6;
}
.error {
color: var(--error-color);
padding: 10px;
background: #fde8e8;
border-radius: 4px;
margin-bottom: 15px;
display: none;
}
.simulator-container {
display: none;
justify-content: center;
margin-top: 30px;
}
.device-frame {
position: relative;
background: var(--device-color);
border-radius: 40px;
padding: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.device-screen {
position: relative;
background: white;
overflow: hidden;
border-radius: 5px;
}
.device-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 20px;
background: var(--device-color);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: 10;
}
.device-home {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 5px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
}
.device-name {
text-align: center;
margin-top: 10px;
font-weight: bold;
}
.website-frame {
width: 100%;
height: 100%;
border: none;
background: white;
}
.device-buttons {
position: absolute;
top: 100px;
right: -5px;
width: 5px;
height: 60px;
background: var(--device-color);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.device-buttons:before {
content: '';
position: absolute;
top: 80px;
right: 0;
width: 5px;
height: 60px;
background: var(--device-color);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
/* 自定义滚动条 */
.device-screen::-webkit-scrollbar {
width: 5px;
}
.device-screen::-webkit-scrollbar-track {
background: #f1f1f1;
}
.device-screen::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
.device-screen::-webkit-scrollbar-thumb:hover {
background: #555;
}
@media (max-width: 768px) {
.input-row {
flex-direction: column;
}
input[type="text"], select {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<div class="input-row">
<h1>纯前端手机网页模拟器</h1>
<div style="flex: 3;">
<label for="url">网页URL</label>
<input type="text" id="url" placeholder="输入要模拟的网页地址(如: https://example.com)" value="https://chalide.com" autocomplete="off">
</div>
<div style="flex: 1;">
<label for="device">设备类型</label>
<select id="device">
<option value="390,844">iPhone 12 (390×844)</option>
<option value="375,667">iPhone 8 (375×667)</option>
<option value="412,915">Galaxy S20 (412×915)</option>
<option value="393,851">Pixel 5 (393×851)</option>
<option value="810,1080">iPad (810×1080)</option>
<option value="360,640">自定义 (360×640)</option>
</select>
</div>
<div style="flex: 1; align-self: flex-end;">
<button id="simulate-btn">模拟查看</button>
</div>
</div>
</div>
<div class="error" id="error-message"></div>
<div class="simulator-container" id="simulator-container">
<div class="device-frame" id="device-frame">
<div class="device-notch"></div>
<div class="device-screen" id="device-screen">
<iframe class="website-frame" id="website-frame" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div class="device-home"></div>
<div class="device-buttons"></div>
<div class="device-name" id="device-name">iPhone 12</div>
</div>
</div>
</div>
<script>
// JavaScript 实现
document.addEventListener('DOMContentLoaded', function() {
const simulateBtn = document.getElementById('simulate-btn');
const urlInput = document.getElementById('url');
const deviceSelect = document.getElementById('device');
const errorMessage = document.getElementById('error-message');
const simulatorContainer = document.getElementById('simulator-container');
const deviceFrame = document.getElementById('device-frame');
const deviceScreen = document.getElementById('device-screen');
const websiteFrame = document.getElementById('website-frame');
const deviceName = document.getElementById('device-name');
// 设备名称映射
const deviceNames = {
'390,844': 'iPhone 12',
'375,667': 'iPhone 8',
'412,915': 'Galaxy S20',
'393,851': 'Pixel 5',
'810,1080': 'iPad',
'360,640': '自定义设备'
};
// 模拟按钮点击
simulateBtn.addEventListener('click', function() {
const url = urlInput.value.trim();
const device = deviceSelect.value;
if (!url) {
showError('请输入要模拟的网页地址');
return;
}
// 验证URL格式
try {
new URL(url);
} catch (e) {
showError('请输入有效的网址，包含http://或https://');
return;
}
simulateWebsite(url, device);
});
// 按Enter键触发模拟
urlInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
simulateBtn.click();
}
});
function simulateWebsite(url, device) {
errorMessage.style.display = 'none';
// 解析设备尺寸
const [width, height] = device.split(',').map(Number);
// 设置设备尺寸
deviceFrame.style.width = (width + 30) + 'px';
deviceFrame.style.height = (height + 30 + 40) + 'px'; // 加上上下边框和底部名称
deviceScreen.style.width = width + 'px';
deviceScreen.style.height = height + 'px';
deviceName.textContent = deviceNames[device] || '自定义设备';
// 设置iframe
websiteFrame.src = url;
websiteFrame.style.width = width + 'px';
websiteFrame.style.height = height + 'px';
// 显示模拟器
simulatorContainer.style.display = 'flex';
// 滚动到模拟器位置
simulatorContainer.scrollIntoView({ behavior: 'smooth' });
}
function showError(message) {
errorMessage.textContent = message;
errorMessage.style.display = 'block';
}
});
</script>
<!-- 功能报错: 15058593138@qq.com -->
</body>
</html>
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)