引言：为什么个人作品集网站是前端开发者的必备技能
在当今的数字时代，个人作品集网站已成为前端开发者展示技能、吸引潜在雇主和客户的重要工具。一个精心设计的作品集网站不仅能展示你的技术能力，还能体现你的设计思维和用户体验意识。本文将带你从零开始，一步步构建一个响应式、兼容性良好的个人作品集网站，并深入探讨如何解决常见的浏览器兼容性问题。
第一部分：项目规划与基础搭建
1.1 项目结构规划
在开始编码之前，我们需要规划一个清晰的项目结构。一个良好的项目结构能提高开发效率，便于后期维护。
portfolio-website/
├── index.html # 主页
├── about.html # 关于我页面
├── projects.html # 项目展示页面
├── contact.html # 联系页面
├── css/
│ ├── main.css # 主样式文件
│ ├── responsive.css # 响应式样式
│ └── normalize.css # 浏览器样式重置
├── js/
│ ├── main.js # 主要JavaScript逻辑
│ └── polyfills.js # 兼容性补丁
├── images/ # 图片资源
├── assets/ # 其他资源（字体、图标等）
└── README.md # 项目说明
1.2 HTML5基础结构
创建一个符合HTML5标准的文档结构，这是确保跨浏览器兼容性的第一步。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="前端开发者张三的个人作品集网站">
<meta name="keywords" content="前端开发, 作品集, HTML, CSS, JavaScript">
<title>张三 - 前端开发者 | 个人作品集</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!-- 导航栏 -->
<header class="header">
<nav class="nav">
<a href="index.html" class="nav__logo">张三</a>
<ul class="nav__menu">
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
<button class="nav__toggle" aria-label="切换菜单">
<span></span>
<span></span>
<span></span>
</button>
</nav>
</header>
<!-- 主要内容区域 -->
<main>
<!-- 这里将根据页面不同填充内容 -->
</main>
<!-- 页脚 -->
<footer class="footer">
<div class="footer__content">
<p>© 2024 张三. 保留所有权利.</p>
<div class="footer__social">
<a href="#" aria-label="GitHub">GitHub</a>
<a href="#" aria-label="LinkedIn">LinkedIn</a>
<a href="#" aria-label="Email">Email</a>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
1.3 使用Normalize.css重置浏览器样式
不同浏览器对HTML元素的默认样式处理不同，这会导致显示不一致。使用Normalize.css可以解决这个问题。
/* css/normalize.css - 部分关键代码 */
/* 1. 基础重置 */
html {
line-height: 1.15; /* 修正IE中的行高问题 */
-webkit-text-size-adjust: 100%; /* iOS中调整文本大小 */
}
body {
margin: 0;
}
/* 2. 修正IE中img的边框问题 */
img {
border-style: none;
}
/* 3. 修正IE中button的字体问题 */
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/* 4. 修正IE中details元素的显示问题 */
details {
display: block;
}
/* 5. 修正IE中summary元素的显示问题 */
summary {
display: list-item;
}
第二部分：CSS布局与样式设计
2.1 使用CSS Grid和Flexbox创建响应式布局
现代CSS布局技术可以大大简化响应式设计的实现。
/* css/main.css - 基础样式 */
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #e74c3c;
--text-color: #333;
--light-bg: #f8f9fa;
--white: #ffffff;
--border-radius: 8px;
--transition: all 0.3s ease;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--white);
}
/* 导航栏样式 */
.header {
background-color: var(--white);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
}
.nav__logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
text-decoration: none;
}
.nav__menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav__menu a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: var(--transition);
position: relative;
}
.nav__menu a:hover {
color: var(--secondary-color);
}
.nav__menu a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary-color);
transition: var(--transition);
}
.nav__menu a:hover::after {
width: 100%;
}
/* 移动端菜单切换按钮 */
.nav__toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.nav__toggle span {
display: block;
width: 25px;
height: 3px;
background-color: var(--primary-color);
margin: 5px 0;
transition: var(--transition);
}
/* 主要内容区域 */
.main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
}
/* 页脚样式 */
.footer {
background-color: var(--primary-color);
color: var(--white);
padding: 2rem 0;
margin-top: 4rem;
}
.footer__content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer__social {
display: flex;
gap: 1.5rem;
}
.footer__social a {
color: var(--white);
text-decoration: none;
transition: var(--transition);
}
.footer__social a:hover {
color: var(--secondary-color);
}
2.2 响应式设计实现
使用媒体查询实现不同屏幕尺寸下的布局调整。
/* css/responsive.css - 响应式设计 */
/* 平板设备 (768px - 1024px) */
@media screen and (max-width: 1024px) {
.nav__menu {
gap: 1.5rem;
}
.main {
padding: 0 1.5rem;
}
}
/* 移动设备 (小于768px) */
@media screen and (max-width: 768px) {
.nav__toggle {
display: block;
}
.nav__menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--white);
flex-direction: column;
gap: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.nav__menu.active {
max-height: 300px;
}
.nav__menu li {
border-bottom: 1px solid #eee;
}
.nav__menu a {
display: block;
padding: 1rem 2rem;
}
.nav__menu a::after {
display: none;
}
.main {
padding: 0 1rem;
}
.footer__content {
flex-direction: column;
text-align: center;
}
}
/* 超小设备 (小于480px) */
@media screen and (max-width: 480px) {
.nav {
padding: 1rem;
}
.nav__logo {
font-size: 1.2rem;
}
.main {
padding: 0 0.5rem;
}
}
第三部分：JavaScript交互功能
3.1 移动端菜单切换
// js/main.js - 移动端菜单切换
document.addEventListener('DOMContentLoaded', function() {
// 移动端菜单切换
const navToggle = document.querySelector('.nav__toggle');
const navMenu = document.querySelector('.nav__menu');
if (navToggle && navMenu) {
navToggle.addEventListener('click', function() {
navMenu.classList.toggle('active');
// 切换按钮动画
const spans = navToggle.querySelectorAll('span');
spans.forEach(span => {
span.style.transform = navMenu.classList.contains('active')
? 'rotate(45deg)'
: 'none';
});
// 修正第二个span的位置
if (navMenu.classList.contains('active')) {
spans[1].style.opacity = '0';
spans[2].style.transform = 'rotate(-45deg)';
} else {
spans[1].style.opacity = '1';
spans[2].style.transform = 'none';
}
});
// 点击菜单项后关闭菜单
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
// 重置按钮动画
const spans = navToggle.querySelectorAll('span');
spans.forEach(span => {
span.style.transform = 'none';
span.style.opacity = '1';
});
});
});
}
});
3.2 平滑滚动与导航高亮
// js/main.js - 平滑滚动与导航高亮
document.addEventListener('DOMContentLoaded', function() {
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 导航高亮（滚动时）
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav__menu a');
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - 100) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
});
第四部分：作品集展示页面实现
4.1 项目卡片组件
<!-- projects.html 中的项目卡片 -->
<section class="projects" id="projects">
<div class="container">
<h2 class="section-title">我的项目</h2>
<div class="projects-grid">
<!-- 项目卡片1 -->
<article class="project-card">
<div class="project-card__image">
<img src="images/project1.jpg" alt="电商网站项目" loading="lazy">
<div class="project-card__overlay">
<a href="#" class="project-card__link">查看项目</a>
</div>
</div>
<div class="project-card__content">
<h3 class="project-card__title">电商网站</h3>
<p class="project-card__description">使用React和Node.js构建的全功能电商网站，包含用户认证、购物车和支付集成。</p>
<div class="project-card__tags">
<span class="tag">React</span>
<span class="tag">Node.js</span>
<span class="tag">MongoDB</span>
</div>
</div>
</article>
<!-- 项目卡片2 -->
<article class="project-card">
<div class="project-card__image">
<img src="images/project2.jpg" alt="任务管理应用" loading="lazy">
<div class="project-card__overlay">
<a href="#" class="project-card__link">查看项目</a>
</div>
</div>
<div class="project-card__content">
<h3 class="project-card__title">任务管理应用</h3>
<p class="project-card__description">基于Vue.js的实时任务管理工具，支持拖拽排序和团队协作功能。</p>
<div class="project-card__tags">
<span class="tag">Vue.js</span>
<span class="tag">Firebase</span>
<span class="tag">PWA</span>
</div>
</div>
</article>
<!-- 项目卡片3 -->
<article class="project-card">
<div class="project-card__image">
<img src="images/project3.jpg" alt="数据可视化仪表盘" loading="lazy">
<div class="project-card__overlay">
<a href="#" class="project-card__link">查看项目</a>
</div>
</div>
<div class="project-card__content">
<h3 class="project-card__title">数据可视化仪表盘</h3>
<p class="project-card__description">使用D3.js和Canvas构建的实时数据可视化仪表盘，支持多种图表类型。</p>
<div class="project-card__tags">
<span class="tag">D3.js</span>
<span class="tag">Canvas</span>
<span class="tag">WebSocket</span>
</div>
</div>
</article>
</div>
</div>
</section>
4.2 项目卡片CSS样式
/* 项目卡片样式 */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.project-card {
background: var(--white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: var(--transition);
display: flex;
flex-direction: column;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.project-card__image {
position: relative;
height: 200px;
overflow: hidden;
}
.project-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.project-card:hover .project-card__image img {
transform: scale(1.1);
}
.project-card__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(44, 62, 80, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.project-card:hover .project-card__overlay {
opacity: 1;
}
.project-card__link {
color: var(--white);
text-decoration: none;
padding: 0.8rem 1.5rem;
border: 2px solid var(--white);
border-radius: var(--border-radius);
transition: var(--transition);
}
.project-card__link:hover {
background: var(--white);
color: var(--primary-color);
}
.project-card__content {
padding: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.project-card__title {
font-size: 1.25rem;
margin: 0 0 0.5rem 0;
color: var(--primary-color);
}
.project-card__description {
color: #666;
margin: 0 0 1rem 0;
flex-grow: 1;
}
.project-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
background: var(--light-bg);
color: var(--primary-color);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
第五部分：解决常见兼容性问题
5.1 浏览器兼容性问题概述
前端开发中常见的兼容性问题包括：
- CSS兼容性问题：不同浏览器对CSS属性的支持不同
- JavaScript API兼容性问题：现代浏览器API在旧版浏览器中不可用
- HTML5元素兼容性问题：HTML5新元素在旧版IE中不被识别
- 响应式设计兼容性问题：媒体查询在不同浏览器中的表现差异
5.2 使用Normalize.css和Autoprefixer
/* 使用Autoprefixer自动添加浏览器前缀 */
/* 原始CSS */
.container {
display: flex;
display: grid;
transition: all 0.3s ease;
transform: rotate(45deg);
backdrop-filter: blur(10px);
}
/* Autoprefixer处理后的CSS（示例） */
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -ms-grid;
display: grid;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
5.3 使用Polyfills解决JavaScript兼容性问题
// js/polyfills.js - 常用Polyfills
// 1. Array.prototype.includes Polyfill (IE不支持)
if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement) {
var O = Object(this);
var len = parseInt(O.length) || 0;
if (len === 0) {
return false;
}
var n = parseInt(arguments[1]) || 0;
var k;
if (n >= 0) {
k = n;
} else {
k = len + n;
if (k < 0) k = 0;
}
while (k < len) {
var currentElement = O[k];
if (searchElement === currentElement ||
(searchElement !== searchElement && currentElement !== currentElement)) {
return true;
}
k++;
}
return false;
};
}
// 2. Element.classList Polyfill (IE9不支持)
if (!('classList' in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/\s+/g);
var index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(' ');
};
}
return {
add: update(function(classes, index, value) {
if (!~index) classes.push(value);
}),
remove: update(function(classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
if (~index) {
classes.splice(index, 1);
} else {
classes.push(value);
}
}),
contains: function(value) {
return !!~self.className.split(/\s+/g).indexOf(value);
},
item: function(i) {
return self.className.split(/\s+/g)[i] || null;
},
length: function() {
return self.className.split(/\s+/g).length;
}
};
}
});
}
// 3. requestAnimationFrame Polyfill (IE9不支持)
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
}
// 4. Element.closest Polyfill (IE不支持)
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;
do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
5.4 解决IE兼容性问题
// 针对IE的特殊处理
// 检测IE浏览器
function isIE() {
return !!document.documentMode;
}
// IE特定的样式调整
if (isIE()) {
// 为IE添加特殊类名
document.documentElement.classList.add('ie-browser');
// IE中Flexbox的兼容性处理
// IE10/11中Flexbox的bug修复
if (window.navigator.userAgent.indexOf('MSIE') > 0 ||
!!window.navigator.userAgent.match(/Trident.*rv\:11\./)) {
// 修复IE中Flexbox的flex-wrap问题
const flexContainers = document.querySelectorAll('.flex-container');
flexContainers.forEach(container => {
if (container.style.flexWrap === 'wrap') {
container.style.display = 'block';
container.querySelectorAll('.flex-item').forEach(item => {
item.style.display = 'inline-block';
item.style.width = '33.33%';
});
}
});
}
}
// IE中CSS Grid的兼容性处理
if (isIE() && !CSS.supports('display', 'grid')) {
// IE不支持CSS Grid，使用Flexbox作为回退方案
const gridContainers = document.querySelectorAll('[class*="grid"]');
gridContainers.forEach(container => {
container.classList.add('flex-fallback');
// 为每个grid-item添加flex样式
const gridItems = container.querySelectorAll('[class*="grid-item"]');
gridItems.forEach(item => {
item.classList.add('flex-item');
});
});
}
5.5 响应式设计的兼容性处理
/* 响应式设计的兼容性处理 */
/* 1. 媒体查询兼容性 */
/* 使用min-width和max-width确保兼容性 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 平板设备样式 */
}
/* 2. 使用@supports检测CSS特性支持 */
@supports (display: grid) {
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
}
@supports not (display: grid) {
.projects-grid {
display: flex;
flex-wrap: wrap;
margin: -1rem;
}
.projects-grid > * {
flex: 1 1 300px;
margin: 1rem;
}
}
/* 3. 移动端触摸目标大小兼容性 */
/* 确保触摸目标至少44x44像素（iOS指南） */
a, button, .nav__toggle {
min-height: 44px;
min-width: 44px;
padding: 0.5rem;
}
/* 4. 高DPI屏幕兼容性 */
/* 为Retina显示屏提供2x图片 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.project-card__image img {
background-image: url('images/project1@2x.jpg');
background-size: cover;
}
}
/* 5. 打印样式兼容性 */
@media print {
.header, .footer, .nav__toggle {
display: none;
}
body {
font-size: 12pt;
line-height: 1.5;
}
a {
text-decoration: underline;
color: #000;
}
a[href]:after {
content: " (" attr(href) ")";
font-size: 0.8em;
}
}
第六部分：性能优化与测试
6.1 图片优化策略
<!-- 使用现代图片格式和响应式图片 -->
<picture>
<source srcset="images/project1.webp" type="image/webp">
<source srcset="images/project1.jpg" type="image/jpeg">
<img src="images/project1.jpg" alt="项目图片" loading="lazy">
</picture>
<!-- 使用srcset和sizes属性 -->
<img
srcset="images/project1-300.jpg 300w,
images/project1-600.jpg 600w,
images/project1-1200.jpg 1200w"
sizes="(max-width: 600px) 300px,
(max-width: 1200px) 600px,
1200px"
src="images/project1-600.jpg"
alt="项目图片"
loading="lazy"
>
6.2 使用Lighthouse进行性能测试
// 在开发环境中运行Lighthouse审计
// 可以通过Chrome DevTools或命令行工具运行
// 示例：使用Node.js运行Lighthouse
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
async function runAudit() {
const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
const options = {
logLevel: 'info',
output: 'html',
onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
port: chrome.port
};
const runnerResult = await lighthouse('http://localhost:3000', options);
const reportHtml = runnerResult.report;
// 保存报告
require('fs').writeFileSync('lighthouse-report.html', reportHtml);
await chrome.kill();
}
runAudit();
第七部分：部署与持续集成
7.1 使用GitHub Pages部署
# .github/workflows/deploy.yml - GitHub Actions部署配置
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
publish_branch: gh-pages
7.2 使用Netlify/Vercel部署
# 1. 安装Netlify CLI
npm install -g netlify-cli
# 2. 登录Netlify
netlify login
# 3. 部署网站
netlify deploy --prod
# 4. 或者使用Vercel
npm install -g vercel
vercel --prod
第八部分：常见问题与解决方案
8.1 常见问题汇总
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 移动端菜单不显示 | JavaScript未正确加载或CSS冲突 | 检查控制台错误，确保DOM加载完成后再执行JS |
| Flexbox在IE中布局错乱 | IE对Flexbox支持不完整 | 使用Autoprefixer添加前缀，或提供Flexbox回退方案 |
| 图片在不同设备上显示不一致 | 未使用响应式图片技术 | 使用<picture>元素和srcset属性 |
| 触摸目标太小 | 未遵循移动设备设计指南 | 确保所有可点击元素至少44x44像素 |
| 字体在不同浏览器中显示不同 | 字体加载策略问题 | 使用font-display: swap和Web字体优化 |
8.2 调试技巧
// 调试兼容性问题的实用函数
function debugCompatibility() {
console.group('浏览器兼容性检测');
// 检测浏览器特性支持
const features = {
'CSS Grid': CSS.supports('display', 'grid'),
'Flexbox': CSS.supports('display', 'flex'),
'CSS Variables': CSS.supports('--primary-color', '#000'),
'ES6 Promise': typeof Promise !== 'undefined',
'ES6 Arrow Functions': () => {},
'ES6 Classes': class {},
'fetch': typeof fetch !== 'undefined',
'IntersectionObserver': typeof IntersectionObserver !== 'undefined',
'ResizeObserver': typeof ResizeObserver !== 'undefined',
'WebP': document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0
};
console.table(features);
// 检测浏览器版本
const ua = navigator.userAgent;
console.log('User Agent:', ua);
// 检测是否为移动设备
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
console.log('Is Mobile:', isMobile);
console.groupEnd();
}
// 在页面加载时运行调试
document.addEventListener('DOMContentLoaded', debugCompatibility);
结语：持续学习与改进
构建一个优秀的个人作品集网站是一个持续迭代的过程。通过本文的指导，你已经掌握了从零搭建网站的基础知识和解决常见兼容性问题的技巧。记住以下几点：
- 保持代码整洁：使用语义化HTML、模块化CSS和可维护的JavaScript
- 测试多浏览器：在Chrome、Firefox、Safari、Edge和IE（如果需要）中测试
- 关注性能：优化图片、减少HTTP请求、使用懒加载
- 保持更新：定期更新你的作品集，添加新项目和技能
- 收集反馈：向同行和潜在雇主寻求反馈，持续改进
通过不断实践和学习，你将能够构建出更加专业、兼容性更好的前端作品集网站，为你的职业发展打下坚实的基础。