移动web开发之移动端真机测试_html/css_WEB-ITnose
× 目录 [1]特性 [2]安装 [3]设置 [4]移动端
前面的话
chrome的开发者工具可以很好地做好模拟工作，但毕竟模拟和实际还是有差别的。所以，真机测试是一定要做的，如何高效地进行真机测试呢。个人感觉，还是BrowserSync用得比较称手。本文将详细介绍如何应用BrowserSync进行移动端真机测试
特性
BrowserSync能让PC、各移动设备上的页面同时实时地响应文件的更改，而不用刷新操作。而且，当在其他一个设备上进行点击等行为时，该行为也会同步到其他浏览器中
安装
BrowserSync是基于Node.js的，是一个Node模块，所以需要先安装nodejs
【nodejs安装】
虽然nodejs官网提供了node的msi文件，但本人在window7系统下多次尝试，均无法安装成功，且会有your system has not been modified...的提示。最终本人使用了另一种方法成功安装了nodejs
【1】下载node.exe
【2】下载最新版本的npm zip格式压缩包
【3】在硬盘某个位置，如D盘下建立一个文件nodejs，把上面两个下载的东西都放在这里，npm要解压
【4】配置两个环境变量：一个是PATH上增加node.exe的目录D:\nodejs，一个是增加环境变量NODE_PATH，值为D:\nodejs\node_modules
【5】安装express：打开cmd命令行(在nodejs目录下，先按住shift按键，再点击右键，出现"在此处打开命令窗口"选项并点击)，使用命令行定位到这Node目录下，键入指令npm install express
【6】安装完成后，在命令行里面输入node -v如果输出nodejs的版本则安装成功
设置
nodejs安装完成后，需要对BrowserSync进行些简单设置，包括安装与监听
【1】BrowserSync安装
打开一个终端窗口，运行以下命令：
npm install -g browser-sync
【2】BrowserSync监听
files 路径是相对于运行该命令的项目（目录）。如果需要监听多个类型的文件，需要用逗号隔开
browser-sync start --server --files "css/*.css, *.html"
【3】在nodejs目录下新建一个index.html的文件，并设置如下代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{ height: 100px; width: 100px; background-color: lightblue;} </style></head><body><div>测试文字</div> </body></html>桌面端页面打开如下：
移动端设置
若使用移动端则首先先保证移动端设备和桌面端设备处于同一局域网(一般地，都连入一个路由器即可)。而且，移动端无法访问localhost，需要查找电脑的内网ip。通过在命令行中输入ipconfig，查看ip地址为192.168.1.100。所以手机端访问的地址为http://192.168.1.100:3000
则移动端显示如下:
当把html文件修改为如下代码时
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>html{ background-color: pink;}</style></head><body><div>测试文字</div> </body></html>无需刷新，移动端的网页自动变化为如下显示:
这样，就可以开始轻松地测试移动端设备了。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Mar 04, 2025 pm 12:32 PM
Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Mar 04, 2025 pm 02:39 PM
Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
