如何在移动模拟器中查看我的HTML网页并使我的代码更高效？

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. 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? 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. I have attached the code I have done so far in HTML, CSS, and JavaScript for anyone's viewing.

我创建了一个网页,并使用CSS处理媒体查询,因此当我在移动模拟器上查看我的网页时,当我缩小屏幕的宽度或将屏幕变为纵向形式时,它将变为活动状态。所以基本上我想知道如何在模拟器上查看HTML我的页面(它看不到在这个网站上工作(http://www.mobilephoneemulator.com/)),如果我正在进行我的媒体查询?我知道他们到目前为止是正确的,但有没有办法可以将两个媒体查询合并到一个媒体查询中?这将减少我在CSS中的代码。到目前为止,我已经将HTML,CSS和JavaScript中的代码附加到任何人的查看中。

2 个解决方案

#1

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.

#2

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)

#1