[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Simulate a high resolution screen

Posted on 2017-09-17
6
High Priority
?
50 Views
Last Modified: 2017-09-22
Hi E's,
I try to do a simulator/emulator for test my pages in different devices.
The problem is when the resolution is higher then the screen that show the simulate, that broke the width of the screen.
For try resolve the problem I use this two codes:
<!DOCTYPE html>
  <html>
    <head>
<meta charset="UTF-8">
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="../../tutoriais/1435/materialize/css/materialize.min.css"/>
 
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
 
    <body>
        
        <div class="row">
            <div class="col s12">
                <iframe style="width:960px; height: 600px;" src="iframe.php" width="1920" height="1200"></iframe>
                </div>
            </div>
        
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="../../tutoriais/1435/materialize/js/materialize.min.js"></script>
    </body>
  </html>

Open in new window

<!DOCTYPE html>
  <html>
    <head>
<meta charset="UTF-8">
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="../../tutoriais/1435/materialize/css/materialize.min.css"/>
 
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
 
    <body>

<div class="row">
<div class="col s2 m10 l10 xl5">
<img src="ponte.jpg" class="responsive-img">
</div>
</div>

      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="../../tutoriais/1435/materialize/js/materialize.min.js"></script>
    </body>
  </html>

Open in new window

The first code is where I call the iframe, and the second is the iframe content.
I try to use CSS to reduce the size of the box, but not resolve the problem.

The question is, have any trick, for show high resolution screen in my simulator without broke the width?

The best regards, JC
0
Comment
Question by:Pedro Chagas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 36

Expert Comment

by:Miguel Oz
ID: 42297304
You should not have the need to write a simulator, browsers like Google chrome have this  feature as part of their dev tools.
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 42297308
Hello,
Have lots of tools to do that, including Google Chrome.
But what I want to do is a simulator, because that I come to ask for help in Expert's Exchange.
Maybe what I want not was possible?!

~JC
0
 
LVL 36

Expert Comment

by:Miguel Oz
ID: 42297326
IT is possible, but I can not justify time spent on it.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 3

Author Comment

by:Pedro Chagas
ID: 42297327
I understand that.
I try to understand better the page viewport, maybe the solution begins with viewport.
Give me just a idea where I can start?!

~JC
0
 
LVL 3

Accepted Solution

by:
Pedro Chagas earned 0 total points
ID: 42297339
Yes, the most easy way is change the viewport, maybe have another solutions, but viewport change was a good solution.

~JC
0
 
LVL 3

Author Closing Comment

by:Pedro Chagas
ID: 42304740
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question