移动端适配测试

这是一个用于测试移动端适配效果的页面。请在手机上打开这个页面来查看适配效果。

基本文本测试

这是一段普通的文本内容。在移动端应该能够正常显示，字体大小适中，行间距合适，方便阅读。

列表测试

无序列表：

  • 第一项内容
  • 第二项内容
  • 第三项内容

有序列表：

  1. 第一步操作
  2. 第二步操作
  3. 第三步操作

图片测试

测试图片

图片应该能够自适应宽度，点击可以放大查看

代码块测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// JavaScript代码测试
function mobileTest() {
    console.log('这是一个移动端代码块测试');
    const screenWidth = window.innerWidth;
    
    if (screenWidth <= 768) {
        console.log('当前是移动端设备');
        // 这行代码比较长，用于测试水平滚动效果
        document.querySelector('.mobile-menu-toggle').addEventListener('click', handleMenuToggle);
    }
    
    return {
        isMobile: screenWidth <= 768,
        deviceInfo: navigator.userAgent
    };
}

表格测试

功能 PC端 移动端 说明
导航菜单 水平显示 折叠菜单 点击汉堡菜单展开
搜索框 始终显示 按钮显示 点击搜索图标展开
侧边栏 右侧固定 底部显示 移动端调整到主内容下方
图片 固定尺寸 自适应 点击可放大查看

引用测试

这是一个引用文本的测试。在移动端应该有合适的缩进和样式，便于区分正文内容。

引用内容可能包含多行文本，需要确保在小屏幕上的可读性。

Mermaid图表测试

graph TD
    A[开始] --> B{是否为移动端?}
    B -->|是| C[加载移动端样式]
    B -->|否| D[加载桌面端样式]
    C --> E[优化触摸交互]
    D --> F[优化鼠标交互]
    E --> G[完成加载]
    F --> G

移动端功能测试清单

基础功能

  • 页面可以正常缩放
  • 文字大小适中，易于阅读
  • 按钮和链接足够大，方便点击
  • 图片自适应屏幕宽度

导航功能

  • 汉堡菜单可以正常开启/关闭
  • 菜单项点击后自动关闭
  • 搜索功能在移动端正常工作
  • 页面滚动流畅

交互功能

  • 下拉刷新功能（仅首页）
  • 图片点击放大功能
  • 代码块可以水平滚动
  • 表格可以水平滚动

阅读体验

  • 侧边栏在移动端调整到底部
  • 文章内容适当的边距和行距
  • 回到顶部按钮位置合适
  • 阅读进度条显示正常

测试说明

  1. 菜单测试：点击右上角的三条横线图标，应该弹出导航菜单
  2. 搜索测试：点击搜索图标，应该展开搜索框
  3. 图片测试：点击上方的测试图片，应该放大显示
  4. 侧滑测试：在文章页面从左边缘向右滑动，应该返回上一页
  5. 下拉刷新：在首页顶部下拉，应该出现刷新指示器

如果发现任何问题，请记录具体的设备型号、浏览器版本和问题描述。