Add this to your HTML head.. <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Here is a technique to align inline elements inside a parent, horizontally and vertically at the same time: Vertical Alignment 1) In this approach, we create an inline-block (pseudo-)element as the first (or last) child of the parent, and set its height property to 100% to take all the height of its parent. 2) Also, … Read more
Using MediaQuery class: MediaQueryData queryData; queryData = MediaQuery.of(context); MediaQuery: Establishes a subtree in which media queries resolve to the given data. MediaQueryData: Information about a piece of media (e.g., a window). To get Device Pixel Ratio: queryData.devicePixelRatio To get width and height of the device screen: queryData.size.width queryData.size.height To get text scale factor: queryData.textScaleFactor Using … Read more
I present to you The Incredible Singing Cat solution =) .wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/ As you move the window bar, you’ll see iframe to responsively resize Alternatively, you may … Read more
Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It’s different for every site. As long as the design flows well at each browser width, … Read more
css3-mediaqueries-js is probably what you are looking for: this script emulates media queries. However (from the script’s site) it “doesn’t work on @imported stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the <link> and <style> elements”. In the same vein you have the simpler Respond.js, which … Read more
Simplest way is to use dimensions in % or em. Just change the base font size everything will change. Less @media (max-width: @screen-xs) { body{font-size: 10px;} } @media (max-width: @screen-sm) { body{font-size: 14px;} } h5{ font-size: 1.4rem; } Look at all the ways at https://stackoverflow.com/a/21981859/406659 You could use viewport units (vh,vw…) but they dont work … Read more
Update for Bootstrap 5 Simpler vertical grid alignement with flex-box @import url(‘https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css’); html, body { height: 100% } <div class=”h-100 d-flex align-items-center justify-content-center”> <div style=”background:red”> TEXT </div> </div> Solution for Bootstrap 4 Simpler vertical grid alignement with flex-box @import url(‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css’); html, body { height: 100% } <div class=”h-100 d-flex align-items-center justify-content-center”> <div style=”background:red”> TEXT </div> … Read more
New solution (2022) CSS has changed since this aswer was written. We now have several properties that can drasticaly simplify code for a square grid : The grid property to handle the grid layout (MDN reference) The aspect ratio property to handle the square aspect ratio of each grid item (MDN reference) The object-fit property … Read more
The minimal-ui viewport property is no longer supported in iOS 8. However, the minimal-ui itself is not gone. User can enter the minimal-ui with a “touch-drag down” gesture. There are several pre-conditions and obstacles to manage the view state, e.g. for minimal-ui to work, there has to be enough content to enable user to scroll; … Read more