如何在移动模拟器中查看HTML网页并提高代码效率？
[英]How can I view my HTML webpage in a mobile emulator and make my code more efficient?
问题描述
var Person= {}; Person.Character= function(firstName, lastName, gender, age) { this.FirstName= firstName; this.LastName= lastName; this.Gender= gender; this.Age= age; } Person.Character.prototype.GetAllInformation= function() { return this.FirstName + " " + this.LastName + " " + this.Gender + " " + + this.Age; } Person.Zack = new Person.Character("Zack", "Efron", "Male", 29); Person.Shia = new Person.Character("Shia", "Labeouf","Male", 30); document.getElementById("demo1").innerHTML = Person.Zack.GetAllInformation(); document.getElementById("demo2").innerHTML = Person.Shia.GetAllInformation();
@media screen and (max-width: 320px) { #demo1{ width: 100px;} #demo2{ width: 100px;} } @media only screen and (orientation: portrait) { body { background-color: red; } }
<html> <head> <meta name="viewport" content="width=device-width"> <title></title> <link rel="stylesheet" type="text/css" href="example-style.css"> </head> <body> <p id= "demo1"></p> <p id= "demo2"></p> <script src="script.js"></script> </body> </html>
Hello Everyone, 
大家好，
I have created a webpage and used CSS to handle media queries so when I view my webpage on a mobile emulator, it will become active when I reduce the width size of the screen or when the screen is turned to portrait form. 我已经创建了一个网页并使用CSS来处理媒体查询，因此，当我在移动模拟器上查看网页时，当我减小屏幕的宽度或将屏幕变成纵向形式时，该网页将变为活动状态。 So basically I want to know how I can view HTML my page on the emulator (it doesn't see to work with on this website( http://www.mobilephoneemulator.com/ )) and if I am doing my media queries right? 因此，基本上，我想知道如何在模拟器上查看HTML页面（该网站无法正常运行该页面（ http://www.mobilephoneemulator.com/ ）），以及我是否在正确地进行媒体查询？ I know they are right so far, but is there a way that I can combine the two media queries into one media query? 我知道到目前为止它们是正确的，但是有没有办法将两个媒体查询合并为一个媒体查询？ This would then reduce the code I have in CSS. 然后，这将减少我在CSS中拥有的代码。 I have attached the code I have done so far in HTML, CSS, and JavaScript for anyone's viewing. 我已经附加了到目前为止我已经用HTML，CSS和JavaScript完成的代码，供任何人查看。
2 个解决方案
解决方案1
1 2017-03-28 22:32:28
How to view your website as mobile on desktop: 如何在台式机上以移动方式查看您的网站：
Chrome 铬
Just go to your html page and then follow these steps: 只需转到您的html页面，然后按照以下步骤操作：
1. CTRL + SHIFT + J | Open Developer Console
2. CTRL + SHIFT + M (in Developer Console) | Mobile Device View
3. Use the drop down to select your mobile screen you wish to preview in
Firefox (credit : Will) Firefox （来源：Will）
1. Ctrl + Shift + M (Cmd + Opt + M for OS X)
解决方案2
1 已采纳 2017-03-28 22:46:04
You can chain media query paramaters! 您可以链接媒体查询参数！
For example: 例如：
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
#demo1{ width: 100px;}
#demo2{ width: 100px;}
}
In your case, your media query would be: 就您而言，您的媒体查询为：
@media screen and (max-width: 320px) and (orientation: portrait)
{
#demo1{ width: 100px;}
#demo2{ width: 100px;}
body { background-color: red; }
}
@Robert I 's answer has all the information you need for testing responsive web design - I'm not going to repost it.
@Robert I的答案包含测试响应式Web设计所需的所有信息-我不会将其重新发布。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.