working on it ...

Filters

Explore Public Snippets

Sort by

Found 161 snippets matching: "screen size"

    public by ronrihoo modified Oct 25, 2017  1563  0  6  1

    Getting the screen size with libGDX

    Along with some other screen analysis methods.
    import com.badlogic.gdx.Gdx;
    import java.lang.Math;
    
    
    public class ScreenDetails {
    
        // ...
    
        /**
         *
         * @return Total count of pixels (height * width).
         */
        private double getResolution() {
            return Gdx.graphics.getHeight() * Gdx.graphics.getWidth();
        }
    
        /**
         *
         * @return PPI (Pixels Per Inch).
         */
        private float getDensity() {
            return Gdx.graphics.getPpiX();
        }
    
        /**
         *
         * @return Horizontal pixel count, squared.
         */
        private double getWidthSquared() {
            return Math.pow(Gdx.graphics.getWidth(), 2);
        }
    
        /**
         *
         * @return Vertical pixel count, squared.
         */
        private double getHeightSquared() {
            return Math.pow(Gdx.graphics.getHeight(), 2);
        }
    
        /**
         *
         * @return Approximate screen size or size of app on screen (diameter in inches).
         */
        private double getScreenSize() {
            return (Math.sqrt(getWidthSquared() + getHeightSquared()) / getDensity());
        }
    
    }

    public by JonahM modified May 15, 2014  3355  3  7  4

    Multicolumn row with responsive images

    Here I've got 3 images, header text and paragraph text which all fit together, central and fully responsive. Because I'm using dimensions in percentages, they're responsive for any screen size. Using Bootstrap Site: http://j.mp/1oilINn
    <div class="col-sm-4">
    					<div class="text-center spacing always bottom little">
    						<img src="home.png" style="width:50%; height:50%">
    					</div>
    			<h3>The Temple of God</h3>
    			<p>...to this man will I look, even to Him that is poor and of a contrite spirit, and who trembles at my word</p>
    </div>

    external by Subhajit Sahu modified Aug 30, 2015  91  0  1  0

    screen-size-test

    screen-size-test: screen-size-test.html
    <!-- @wolfram77 -->
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
    <title>Screen Size Test</title>
    </head>
    
    <body>
    
    
    <script type="text/javascript">
    window.onload = function() {
    	var tstEl = document.getElementById('test-box');
    	var dpi = {'x': tstEl.offsetWidth, 'y': tstEl.offsetHeight};
    	var resEl = document.getElementById('screen-res');
    	var res = {'x': screen.width, 'y': screen.height};
    	resEl.innerHTML = res.x+' x '+res.y;
    	var dimXyEl = document.getElementById('screen-dim-xy');
    	var dimXy = {'x': res.x/dpi.x, 'y': res.y/dpi.y};
    	dimXyEl.innerHTML = dimXy.x.toFixed(2)+'in x '+dimXy.y.toFixed(2)+'in';
    	var dimDiagEl = document.getElementById('screen-dim-diag');
    	var dimDiag = Math.sqrt(dimXy.x*dimXy.x + dimXy.y*dimXy.y);
    	dimDiagEl.innerHTML = dimDiag.toFixed(2)+'in';
    };
    </script>
    
    
    <style>
    body {
    	margin: 0;
    }
    
    h1 {
    	margin-top: 0;
    	padding-top: 2em;
    	padding-bottom: 1em;
    	font-weight: 400;
    	color: #333;
    }
    
    h1, .info {
    	text-align: center;
    	font-family: "Open Sans", "Helvetica", "Trebuchet MS", sans-serif;
    }
    
    .info {
    	padding-bottom: 6em;
    }
    
    .main {
    	margin-top: 0;
    	margin-bottom: 0;
    	border: 1px dashed #DDD;
    	padding: 2em;
    }
    
    #test-box {
    	width: 1in;
    	height: 1in;
    }
    
    html {
    	width: 100%;
    	height: 100%;
    }
    
    #screen-box {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	background-color: #EEE;
    }
    </style>
    
    
    <div id="screen-box">
    	<h1>Screen Size Test</h1>
    	<div id="test-box">
    	</div>
    	<p class="info main">Resolution: <span id="screen-res">?</span></p>
    	<p class="info main">Dimensions: <span id="screen-dim-xy">?</span> (<span id="screen-dim-diag">?</span> screen)</p>
    </div>
    
    </body>
    
    </html>
    
    
    

    external by carloscabo modified Feb 11, 2016  25227  0  3  0

    SASS @mixing that scales font size proportionally to screen width, with lower and upper limit...

    SASS @mixing that scales font size proportionally to screen width, with lower and upper limit...: scale-font-size-proportionally-to-screen-size.scss
    /*
    Scales a font proportionally to the screen size, from -> to
    All parameters are pixels, but don't add the 'px' units!
    
    It adds mediaqueries to fix font-size upper and lower limit
    
    @include autoscale-font (
       //  320 screen width -> font size 24px
      320,  24,
      // 1600 screen width -> font size 64px
      1600, 64
    );
    
    Outputs something like:
    font-size: 64px;
    font-size: calc( 24px + (64 - 24) * ( ( 100vw - 320px ) / ( 1600 - 320 ) ) );
    @media only screen and (min-width: 1600px)
      .title {
        font-size: 64px;
      }
    }
    
    */
    @mixin autoscale-font (
      $min-screen-width, $min-font-size,
      $max-screen-width, $max-font-size,
      $default-font-size: $max-font-size // Optional
    ) {
      font-size: #{$max-font-size}px; // Default
      font-size: calc( #{$min-font-size}px + (#{$max-font-size} - #{$min-font-size}) * ( ( 100vw - #{$min-screen-width}px ) / ( #{$max-screen-width} - #{$min-screen-width} ) ) );
      // Define minimun only if necessary
      @if ( $min-screen-width > 320 ) {
        @media only screen and (max-width: #{$min-screen-width}px) {
          & { font-size: #{$min-font-size}px ; }
        }
      }
      // Upper limit
      @media only screen and (min-width: #{$max-screen-width}px) {
        & { font-size: #{$max-font-size}px ; }
      }
    }
    
    

    external by Github modified Jun 3, 2015  11  0  1  0

    This JS code checks the width of the browser window, and loads the according stylesheet variant. Stylesheet variants are differentiated by a two-letter suffix (-tn, -xs, -sm, -md, -lg, -xl, -xx). These are standard Bootstrap screen-sizes, with some ext...

    This JS code checks the width of the browser window, and loads the according stylesheet variant. Stylesheet variants are differentiated by a two-letter suffix (-tn, -xs, -sm, -md, -lg, -xl, -xx). These are standard Bootstrap screen-sizes, with some extensions added from: https://github.com/webprom/bootstrap-layout-xl-xxl/blob/master/bootstrap-xl-xx
    /*
    *   author: arpad1976@gmail.com
    *   2015-06-02
    */
    var windowWidth = window.innerWidth;
    var windowWidth = window.innerWidth;
    if (windowWidth >= 1920) {
          styleSheetVariant = '-xx';
      } else if (windowWidth >= 1440 && windowWidth < 1920) {
          styleSheetVariant = '-xl';
      } else if (windowWidth >= 1200 && windowWidth < 1440) {
          styleSheetVariant = '-lg';
      } else if (windowWidth >= 992 && windowWidth < 1200) {
          styleSheetVariant = '-md';
      } else if (windowWidth >= 768 && windowWidth < 992) {
          styleSheetVariant = '-sm';
      } else if (windowWidth >= 480 && windowWidth < 768) {
          styleSheetVariant = '-xs';
      } else if (windowWidth >= 320 && windowWidth < 480) {
          styleSheetVariant = '-tn';
      }
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'cssFolder/cssFilename-'+styleSheetVariant+'.css';
    link.media = 'screen';
    head.appendChild(link);
    
    

    external by Kevin Xu modified Feb 10, 2015  206  0  2  0

    iOS device checks for OS version and screen size in Swift

    iOS device checks for OS version and screen size in Swift: Device.swift
    //
    //  Device.swift
    //  imHome
    //
    //  Created by Kevin Xu on 2/9/15.
    //  Copyright (c) 2015 Alpha Labs, Inc. All rights reserved.
    //
    
    import Foundation
    
    // MARK: - Device Class
    
    class Device {
        
        // MARK: - Device Properties
        
        class var currentDeviceVersion: Float {
            struct Singleton {
                static let version = UIDevice.currentDevice().systemVersion.floatValue
            }
            return Singleton.version
        }
        
        class var currentDeviceSize: CGFloat {
            struct Singleton {
                static let size = UIScreen.mainScreen().bounds.size.height
            }
            return Singleton.size
        }
        
        // MARK: - Device Version Checks
        
        // MARK: iOS 5 Checks
        
        class func IS_OS_5() -> Bool {
            return currentDeviceVersion >= 5.0 && currentDeviceVersion < 6.0
        }
        
        class func IS_OS_5_OR_LATER() -> Bool {
            return currentDeviceVersion >= 5.0
        }
        
        class func IS_OS_5_OR_EARLIER() -> Bool {
            return currentDeviceVersion < 6.0
        }
        
        // MARK: iOS 6 Checks
        
        class func IS_OS_6() -> Bool {
            return currentDeviceVersion >= 6.0 && currentDeviceVersion < 7.0
        }
        
        class func IS_OS_6_OR_LATER() -> Bool {
            return currentDeviceVersion >= 6.0
        }
        
        class func IS_OS_6_OR_EARLIER() -> Bool {
            return currentDeviceVersion < 7.0
        }
        
        // MARK: iOS 7 Checks
        
        class func IS_OS_7() -> Bool {
            return currentDeviceVersion >= 7.0 && currentDeviceVersion < 8.0
        }
        
        class func IS_OS_7_OR_LATER() -> Bool {
            return currentDeviceVersion >= 7.0
        }
        
        class func IS_OS_7_OR_EARLIER() -> Bool {
            return currentDeviceVersion < 8.0
        }
        
        // MARK: iOS 8 Checks
        
        class func IS_OS_8() -> Bool {
            return currentDeviceVersion >= 8.0 && currentDeviceVersion < 9.0
        }
        
        class func IS_OS_8_OR_LATER() -> Bool {
            return currentDeviceVersion >= 8.0
        }
        
        class func IS_OS_8_OR_EARLIER() -> Bool {
            return currentDeviceVersion < 9.0
        }
     
        // MARK: - Device Size Checks
        
        // MARK: Retina Check
        
        class func IS_RETINA() -> Bool {
            return UIScreen.mainScreen().respondsToSelector("scale")
        }
        
        // MARK: 3.5 Inch Checks
        
        class func IS_3_5_INCHES() -> Bool {
            return currentDeviceSize == 480
        }
        
        class func IS_3_5_INCHES_OR_LARGER() -> Bool {
            return currentDeviceSize >= 480
        }
        
        class func IS_3_5_INCHES_OR_SMALLER() -> Bool {
            return currentDeviceSize <= 480
        }
        
        // MARK: 4 Inch Checks
        
        class func IS_4_INCHES() -> Bool {
            return currentDeviceSize == 568
        }
        
        class func IS_4_INCHES_OR_LARGER() -> Bool {
            return currentDeviceSize >= 568
        }
        
        class func IS_4_INCHES_OR_SMALLER() -> Bool {
            return currentDeviceSize <= 568
        }
        
        // MARK: 4.7 Inch Checks
        
        class func IS_4_7_INCHES() -> Bool {
            return currentDeviceSize == 667
        }
        
        class func IS_4_7_INCHES_OR_LARGER() -> Bool {
            return currentDeviceSize >= 667
        }
        
        class func IS_4_7_INCHES_OR_SMALLER() -> Bool {
            return currentDeviceSize <= 667
        }
        
        // MARK: 5.5 Inch Checks
        
        class func IS_5_5_INCHES() -> Bool {
            return currentDeviceSize == 736
        }
        
        class func IS_5_5_INCHES_OR_LARGER() -> Bool {
            return currentDeviceSize >= 736
        }
        
        class func IS_5_5_INCHES_OR_SMALLER() -> Bool {
            return currentDeviceSize <= 736
        }
    }
    
    

    external by Brian Sanchez modified Apr 21, 2016  139  0  2  0

    Check what bootstrap screen-size you are currently on.

    Check what bootstrap screen-size you are currently on.: screen-size.html
    <div class="hidden-sm-up">xs</div>
    <div class="hidden-md-up hidden-xs-down">sm</div>
    <div class="hidden-lg-up hidden-sm-down">md</div>
    <div class="hidden-xl-up hidden-md-down">lg</div>
    <div class="hidden-lg-down">xl</div>
    
    

    external by ageorg modified Nov 19, 2016  114  0  2  0

    Determin the screen size of an android device

    Determin the screen size of an android device: Screen size
    int screenSize = getResources().getConfiguration().screenLayout
                    & Configuration.SCREENLAYOUT_SIZE_MASK;
            switch (screenSize) {
                case Configuration.SCREENLAYOUT_SIZE_XLARGE:
                    Toast.makeText(this, "Extra large screen", Toast.LENGTH_LONG).show();
                    break;
                case Configuration.SCREENLAYOUT_SIZE_LARGE:
                    Toast.makeText(this, "Large screen", Toast.LENGTH_LONG).show();
                    break;
                case Configuration.SCREENLAYOUT_SIZE_NORMAL:
                    Toast.makeText(this, "Normal screen", Toast.LENGTH_LONG).show();
                    break;
                case Configuration.SCREENLAYOUT_SIZE_SMALL:
                    Toast.makeText(this, "Small screen", Toast.LENGTH_LONG).show();
                    break;
                default:
                    Toast.makeText(this,
                            "Screen size is neither large, normal or small",
                            Toast.LENGTH_LONG).show();
            }
    
    

    external by Thomas Gardner modified Jan 9, 2015  80  0  1  0

    Sticky Top Bar // You may also wrap your top bar in div class="sticky" and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll. Note: ...

    Sticky Top Bar // You may also wrap your top bar in div class="sticky" and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll. Note: If you are using SCSS, you can control the default sticky class by adjusting the $topbar-sticky-cl
    <div class="contain-to-grid sticky">
      <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
        ...
      </nav>
    </div>
    
    

    external by Jasper Frumau modified Dec 7, 2015  57  0  1  0

    Custom Menu with hamburger for smaller screen sizes, search and social media

    Custom Menu with hamburger for smaller screen sizes, search and social media: custom-menu.css
    <nav id="nav-wrap"><a id="toggle-btn" title="Menu" href="#"><span class="menu-icon">Menu</span></a>         
    	         
    	         
             	 
    
             	<a class="mobile-search-trigger" href="#"><i class="fa fa-search"></i></a>           
    
    	         <ul id="nav" class="nav">
    	            <li class="current"><a href="#hero">Home</a></li>
    		         <li><a href="#portfolio">Works</a></li>
    	            <li><a href="#services">Services</a></li>
    	            <li><a href="#about">About</a></li>
    	            <li><a href="#contact">Contact</a></li>
    
    	            <!-- right menu -->	
    	            <li class="right-menu">
    	            	<ul>
    				     		<li class="header-search">
    				     			<a href="#" id="search-trigger"><i class="fa fa-search"></i></a>
    				     		</li>
    				     		<li class="header-social">
    				        		<span><a href="#"><i class="fa fa-facebook"></i></a></span>
    				        		<span><a href="#"><i class="fa fa-twitter"></i></a></span>
    				        		<span><a href="#"><i class="fa fa-google-plus"></i></a></span>
    				      	</li>
    				      	<li class="header-btn"><a href="#">Get A Quote</a></li> 
    				     	</ul>
    	            </li>
    
    	         </ul> <!-- end #nav -->	         
    
    		     	<div id="header-search">		     		
    		     			<form>
    						<input type="text" id="s" name="s" class="search-field" placeholder="Type to search …">
    						</form>
    						<a href="#" class="close-btn">Close</a>		     			     		
    		     	</div>	
    
    	      </nav>
    
    
    • Public Snippets
    • Channels Snippets