Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="" />
  
  <title>JS Bin</title>
</head>
<body>
  <form class="form">
    <div class="input">
      <label>Control Page width</label>
      <input type="range" name="width" min="320" value="500" max="1366" step="10"><label id="widthAmt"></label>
    </div>
​
     <fieldset id="meta-toggles">
       <legend>viewport meta</legend>
    </fieldset>
​
    
  </form>
​
  <div id="content" style="width: 500px">
    <h1>Safari not optimized for Pro screen?</h1>
    <p>Is it just me or does Safari just kind of seem stretched out on the Pro when you are using the entire screen? It looks find when you run split view (of course it does since it is just the size of a regular iPad screen.</p>
​
<p>My hope was to be able to use Safari to run my electronic medical record (ideally with the backordered still pen for ordering tests). When I load my EMR it looks shockingly similar to when it was on the regular iPad...Stuff is nice and big, but I would LIKE to be able to zoom out further to see more data on the screen at once, but I feel like everything is TOO zoomed in.</p>
​
<p>I dropped dynamic text to it's smallest, no help. What I need is a selection similar to my Retina MBP 13" where I can do dynamic screen scaling and fit MORE on the screen...</p>
​
Is this just a product of an immature product/software development cycle?</p>
  
  </div>
​
</body>
</html>
 
* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  line-height: 1.35;
}
​
p {
  margin-bottom: 1.5em;
}
​
#content {
  margin: 0 auto;
  border: 1px dotted #333;
  padding: 0 3em;
  background-color: #ffffec;
}
​
.input label, legend {
  font-variant: small-caps;
}
​
.input label:first-child {
  display: block;
}
​
.input input {
  margin-right: 1em;
}
​
.input {
  margin: 1em 0;
}
​
fieldset .input {
  margin: 0;
}
​
.form {
  padding: 0;
  font-family: sans-serif;
  display: block;
  width: 320px;
  margin: 0 auto 1em;
  
}
 
var $width = $('[name="width"]');
​
var metaToggles = [
  { key: 'width', value: 'device-width' },
  { key: 'maximum-scale', value: '1' },  
  { key: 'user-scalable', value: 'no' }
];
​
function setup() {
  var inputs = metaToggles.map(function (spec) {
     return $('<div class="input"><input type="checkbox" name="'+spec.key+'"><label>'+[spec.key, spec.value].join('=')+'</label></div>');
  });
  
  $('#meta-toggles').append(inputs);
}
​
function sync() {
  
  var data = {
    width: $width.val()
  };
  
  $('#widthAmt').text(data.width);
  $('#content').css({width: data.width });
  
  var viewport = [];
  
  metaToggles.forEach( function (spec) {
     if ($('[name="'+spec.key+'"]').is(':checked')) {
       viewport.push([spec.key, spec.value].join('='));
     }
  });
    
  $('meta[name="viewport"]').attr('content', viewport.join(','));
}
​
$(function() {
  setup();
  $width.on('input', sync);
  metaToggles.forEach( function(spec) {
    $('[name="'+spec.key+'"]').on('change', sync);
  });
​
  
  sync();
  
  
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
masotimepro
0viewers