FAQ Database Discussion Community


CSS mobile version of web site is zoomed in A LITTLE BIT when loaded (only whatchable with mobile device)

css,mobile,zoom,viewport,pinchzoom
I have set up a mobile web site of http://www.berlin-ra-kanzlei.de/ ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch. It...

Both iOS WebView types incorrectly setting 320px viewport size on iPhone 6 and 6+ (Xamarin app)

ios,uiwebview,xamarin,viewport,wkwebview
I've been wrestling with this for a few hours now. Here's the repro scenario (Xamarin.iOS 8.10, iOS 8.2): Created a (mostly) empty test web page (no stylesheet, just a width=100% on the body) with the following tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Page loaded in both a UIWebView and WKWebView (preferred)...

Why use rem instead px when it's the same anyway?

html,css,viewport,pixel
Okay, first off, yes I have read many many articles (Should I use px or rem value units in my CSS?) and forums about this. I know that 1px is not a physical pixel but rather a CSS pixel, and rem is basically the same as em, but it is...

Listener for Direction of Resize

javascript,jquery,user-interface,viewport,onresize
I have a right pointing triangle. ▶ On resize, the triangle should move in the direction of the resize, and when it changes direction, the triangle should flip horizontally, without ever going out of the screen. Is there a way to listen to the direction (LEFT / RIGHT) in which...

How to Remove class or activate class for specific view port only

css,mobile,media-queries,viewport,tablet
Not sure if this would require Javascript, or if there is a way to do this with CSS alone. Basically I want to have a class active only for medium and small size browswers. Example: <style> .big {font-size: 2em;} .normal {font-size: 1em;} </style> <div class="big"> <p> This text is huge...

Is there a way to get the real viewport size in hardware-pixels without viewport meta tag?

javascript,hardware,device,viewport,pixel
I want to get the viewport width with javascript. But not the common virtual viewport. I need the logical hardware viewport and in my case it's not an option to set the viewport meta tag. To clearify my issue: I want to get 320 pixels on IPhone 5 (640 hardware...

Ubuntu - MonoGame static graphics.Viewport size

ubuntu,graphics,monodevelop,viewport,monogame
I'm running MonoGame in MonoDevelop under Ubuntu and doing some tutorials, but I'm constantly experiencing a problem with the size of graphics.Viewport Each time I build an app, it doesn't matter if it is windowed or fullscreen. The resolution doesn't matter also. graphics.Viewport.Width graphics.Viewport.Height always return 800x480. Does anyone has...

Create responsive web page with CSS (need help about page width)

html,css,responsive-design,viewport
I am trying to create responsive web-page for four sizes of screen (320px, 640px, 980px and 1024px). So when I play around with site size all seems fine, all responsive, but when I make size larger than 1024px, I want to stop any resizing actions and make page look like...

How can I remove the FancyBox prev/play/next arrows in the navbar at the top of the FancyBox viewport?

jquery,fancybox,viewport,navbar,fancybox-2
I have thumbnails. If you click on these thumbnails, fancybox kicks in to show the bigger image. At the top of the viewport is a navbar with arrows that let you click to move left or right in the gallery, or to play the video if the thumbnail was a...

THREE.js Orthographic camera aspect must match viewport aspect?

three.js,viewport,orthographic
Please could someone confirm that the following "supposed constraint" is correct?... In order to render a three.js orthographic camera to a viewport (and to avoid distortion) the camera's frustum left,right,bottom and top planes must define a frontal frustum face (ocWidth, ocHeight) whose aspect ratio (width/height) is the same as the...

CSS Menu Not Working on Mobiles or Tablets

html,css,angularjs,css3,viewport
I have created the plunkr found here: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview This menu works as expected on a desktop/laptop.. But it does not look as it does on a desktop. I imagine the CSS is correct, but something wrong with the viewport settings?? HTML: <body ng-controller="MainCtrl" ng-style="{true: {overflow: 'hidden'}, false: {}}[toggleMenu]"> <div class="header...

css not working on mobile device, cropped layout

html,css,mobile,viewport
I have made a webpage which is working on any browser but not on mobile devices. The webpages may seems like very unprofessional but it is for testing. I think maybe the problem seems to be in the viewport settings in css. Can someone help me out? The link is:...

No matter what, section won't become 100% browser height

html,css,responsive-design,viewport
Here's the website: jasontheodore.com I am just trying to place some heading text directly in the center of a div that takes up 100% of the browser height. The code is as follows: HTML: <section id="landing-page"> <div id="logo"> <h5>Jason Theodore Bain</h5> <h4>graphic designer . marketer</h4> </div> </section> CSS: html, body...

Floated Sidebar: How to get sidebar full height of window?

css,height,equals,viewport,sidebar
I know that there will be people that may ask for the full code, but I'm just asking in a very general sense. Say, I have the main content floated to the left with no fixed height and the sidebar floated to the right. I want the sidebar to take...

Check if element is between 30% and 60% of the viewport

javascript,jquery,html,css,viewport
I am trying to change the color of <li> elements when they are between 30% and 60% of the viewport. So I have this grid of elements stacking side by side like this: I ran into few plugins like Waypoints, Viewport Checker and few others but nothing good. Any idea?...

Cross Viewport oclussion culling

xna,overlay,viewport,xna-4.0,occlusion-culling
I'm currently working on a XNA project where I need to create a Picture in picture Overlay to displaying a 3D scene from multiple angles. currently I'm trying to use 2 viewports to do this. The main one fills whole screen and is working as desired. The second is placed...

Get the number of an element's pixels which are inside the viewport

javascript,html,dom,position,viewport
I'm trying to get the total number of a given html element's pixels which are visible inside the viewport. This question and accepted answer Can I detect the user viewable area on the browser? were very useful for determining whether the element is in view/out of view/partially in view, but...

percentage width in css not working

html,css,width,viewport,percentage
I was using a way to define my width property in css with the viewport measurement, css code: #content { position: absolute; background-color: white; width: 100vw; top: 115px; bottom: 30px; display: table; z-index: 0; } When I changed the width from width: 100vw; to width: 100%; my code ain't working...

White margin error on site when viewing on landscape ipad bootstrap 3

twitter-bootstrap,twitter-bootstrap-3,viewport
Built a site using bootstrap 3, looks great and works great on all devices apart from an iPad 4 landscape. Im currently able to slide to the left on the site and a white margin appears offsite. My container width is 1044px, and content width 1024px (container width - 2x10px...

phantomjs image width not getting as expected

javascript,phantomjs,screenshot,viewport,browser-width
when i take screenshots using phanomjs using the following code works fine and I am getting width as 1920px and height is not a problem for me. var webPage = require('webpage'); var page = webPage.create(); page.viewportSize = { width: 1920, height: 1080 }; page.open("http://www.google.com", function start(status) { page.render('google_home.png'); phantom.exit(); but,...

Libgdx very bad quality of scaled down stage

libgdx,viewport,scaling,stage
I am doing my very first libgdx game, and I have a problem with the scaling quality. I created a new class that implements the Screen interface. I programmed everything on that screen as if it was always to run on a 1080x1920 resolution, and then I used the FitViewport...

Why doesn't my site respond to the size of my browser window?

css,responsive-design,media-queries,viewport,meta
I have created a page with media queries in my CSS so that it should respond to the viewport of the device. When I use the Firefox web dev tool for responsive design I can see how my site reacts. But when I resize my browser I cannot. http://champlain.torqueweb.com/html/Responsive1.html Should...

Ext JS 5 - add grid panel to viewport

javascript,extjs,viewport,gridpanel
I'm looking for a way to add a grid panel to my viewport, I tried to use the add() function but this didn't work for me. Ext.application({ name : 'MyApp', launch : function() { Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'north', html: '<h1 class="x-panel-header">Page Title</h1>', border: false, margin: '0...

Website Mobile Issue - Viewport

html,css,mobile,viewport
I have just launched my website http://www.connorgraham.com.au and am having mobile viewing issues. Prior to launch, everything was working and looking perfect, however I have just realised that on mobile, you are able to scroll to the right to show a white bar that covers 20% or so of an...

Page Speed Insights - Size Content to Viewport?

css,viewport,google-pagespeed
I am getting the error in Google Page Speed Insights stating: "The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience." "The page content is 378 CSS pixels wide, but the viewport...

I can't fix camera to any object in a 2D Matrix

c#,matrix,camera,xna,viewport
Problem description: I am trying to develop some 2D game with terrain collision in C# using XNA framework. I have already completed simple terrain generating and object, for example car, can move on this terrain. But now, I get a problem with camera fix to that car. I tried to...

Why does my viewport look different when I deploy to heroku?

html5,mobile,heroku,responsive-design,viewport
I have a simple web app that I am deploying to heroku. In my html, I am have the meta information about the viewport: <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <title>Notify</title> <link rel="stylesheet" type="text/css" href="./app.css"> <link rel="stylesheet" type="text/css" href="./bootstrap.css"> </head> Here is my server code: var express = require('express');...

Libgdx Viewport with stage not working [Fixed]

java,android,libgdx,viewport,scene2d
So 2 months ago i stumbled upon the problem that my game that i was working on did not scale with other devices. So i decided to implement viewports since people said that it was the best way and also an easy way. But its been around 2 months since...

I want to make a viewport for a canvas game

javascript,html5,canvas,viewport
So I have a game(that is more of a map) that loads a bunch of tiles and places them together. The tiles load just fine, but I'd like to move the viewport. I've looked into this subject, and I have a function that checks the keyboard. If 'd' is being...

How to ignore black bars on fitviewport(LibGdx) when getting coordinates?

java,libgdx,touch,coordinates,viewport
I have a problem that can't resolve. I use a stage in my game with FitViewport style. stage = new Stage(new FitViewport(SCREEN_WIDTH, SCREEN_HEIGHT)); But there's a problem when I get the touchdown coordinates and black bars appear on screen (if the screen has the right ratio there's no problem). @Override...

Is it possible to double viewport height in jquery function

jquery,viewport
I have a very basic jquery question. Is it possible to do some arithmetic operations on viewport variables? And if so how, I cant seem to get it. <script> var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); if (scroll >= 2*viewportHeight ) { //<-- would like to add a class...

CSS background-position variation between chrome/firefox

css,firefox,viewport,background-position,variation
I am creating a website for a final project and am having an issue with the background-position of my nav's image changing between browsers (mainly Firefox). This can be demonstrated by clicking the link to the page I have uploaded on my college's server: http://cis.scc.losrios.edu/~cisw320q_stu007/sbc/index.html . Alternating the viewport (Chrome/Firefox)...

Viewports and pixel sprites - libgdx

android,libgdx,viewport,pixel
I'm new with libgdx and I have a big problem. I'm developing a game using pixel sprites and they look nice in my phone but if I test the game in another phone the sprites looks very stretched and bad. I've testing viewports but I don't get it working as...

initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile

mobile,responsive-design,media-queries,viewport,initial-scale
So I'm pretty stumped right now. I'm building a responsive website using the theme Delicate. It comes in built with the meta tag Which I was under the impression would set the entirety of the content on the screen width. On my phone I have to zoom out to have...

jQuery 2.1 | Highlight first
  • completely visible in scrollable
      viewport
  • jquery,html-lists,viewport
    I'm trying to adapt this code from Stackoverflow for my specific needs. I need to highlight via addClass the first <li> that is completely visible in a scrolling <ol> viewport, regardless of length of <li>. I swapped the $(window) scrolling part of the code for a scrollable <ol> which nearly...

    Firefox mobile: Links getting activated by touching elsewhere

    firefox,mobile,hyperlink,scale,viewport
    I've got a strange probleme here. If I have this line in the HEAD part <meta name="viewport" content="width=1200,initial-scale=2,minimum-scale=2"> touching the lines which are not links in the following example causes one of the links to get activated: <ul> <li><a href="http://www.example.com">example</a></li> <li><a href="http://www.test.com">test</a></li> <li>Text in between</li> <li>Even more text in between</li>...

    How do I obtain a floating element's left offset while it is outside the viewport?

    javascript,jquery,html,css,viewport
    Here's my situation. I've created several panels stacked side by side which are wrapped in a main container. Each panel takes 100% the viewport width and height. My goal is to be able to scroll horizontally to each panel when I click on their respective link. This works fine using...

    Libgdx: How to calculate sprite size when viewport is in used

    libgdx,viewport
    I have few questions regarding using libgdx viewport. I have initialised a viewport with this virtual screen size (800 x 480). I'm trying to display a sprite with (100 x 100) virtual size. Do I recalculate based on the screen size ratio to supply the size? Or I just apply...

    jQuery resize and viewport checkpoint

    javascript,jquery,css,viewport
    I have a small problem with my script. I want to change body background colour based on width of screen. My problem is I don't know that I have to change to make it work from under 960 to 1130. Ex: Let's say I rezise my browser. 1300px -> 1150px...