I am developing a website (mostly) without responsive adaptations. I made it so that it looks the same on PC as on smartphone (smartphone-first approach). No frameworks or anything, just nice clean html/css. I specifically made it to fit within 700px width, so that I only need to declare viewport 700px wide and it would fit - but it does not.
<meta name="viewport" content="700, initial-scale=1" />
but whatever I try, the website is always too big on the smartphone (tested on android, brave and chrome) and has to be zoomed out to get it to fit. How can that be? There is nothing on the page wider than 600px.
here is the site in development https://zugergrafik.ch/betreibungsauszug/
I appreciate any input
Related
We're whipping up a prototype using 2x layout--meaning that the everything was designed at 640px and we're going to display it at 320px on the device. So we have:
<meta name="viewport" content="width=device-width, initial-scale=.5, user-scalable=no">
This works perfectly on a 320px wide device such as the iPhone 5 but on wider screens such as iPhone 6 and various android devices, it doesn't fill the full width of the screen (since it's wider than 320).
Is there a way to get the meta tag to calculate the proper initial-scale so that it fills the width of the device?
Alas, we're heavily restricted by our prototyping tool in terms of custom code, but I could get away with some custom CSS and JS. I could see writing some JS to grab the device width, then doing the math to then generate the viewport tag...which I may resort to...but was hoping there's already a way to handle it by default with the meta tag attributes.
I'm in the process of creating a responsive site. It is resizing properly, but I noticed, that when highlighting text on the page, as if I were going to copy it into my clipboard, it scrolls to the right revealing white space.
There is no scroll bar because I have implemented html{overflow-x:hidden} in my stylesheet, so this isn't like the other situations I've seen around the web. This only occurs at sizes less than 1024px.
I have set media query sizes, have styled accordingly, and again have hidden any overflow.
This site is not live right now, and my client is trying to keep things rather private, so my hands are tied with how much I can share.
What could I be missing that could be causing this white space to appear?
put this in <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
Make sure your margins and paddings are not overflowing and not set to 100%.
you can use chromes inspector or something to debug for that.
I'm having issues with my website on mobile devices. I've done everything I can find to enable zooming, and I've only been able to get it to work sporadically. Please help me!
I've tried using a meta tag a million different ways (user-scalable=1, user-scalable=true, playing with min and max, etc) and nothing seems to help.
http://blindvisionfilms.com/index.html
What am I missing?
Set the viewport to something more mobile friendly:
<meta name="viewport" content="width=device-width, initial-scale=1">
Remove the min-width from your body element.
Since you're using bootstrap: take a look at their grid system and wrap your content in grid columns.
This will ensure that the layout responses correctly on a mobile.
So, it turns out that the issue I was having was with the quojs framework. It binds on body's touchmove event and if there are 2 fingers in the touch, then it prevents the default behavior. I realized that I'm only using one small part of the functionality so I'm now only using that small bit of code instead.
I'm busy making an existing site responsive, currently I'm only making it responsive for one resolution so that my sales manager can "sell" the idea of a responsive site to the client. I've run into a problem, I've been assigned the screen size of 480px by 800px, the screen size of a Samsung Galaxy S III Mini.
When testing the responsive design on my computer using responsive design view in firefox or various other online tools, it works fine. However, when I test it on my phone, it displays the correct responsive design but it does not fill the width of the screen. In other words, the screen width is 480 pixels, but nothing on the page actually fills that 480px it only covers about half the screen width and leaves white space on the right.
This is the media query that I'm using:
#media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
Does this have something to do with pixel density or what is causing this problem?
Thanks in advance
Kind Regards
Willem
<meta name="viewport">
Have you looked into this tag? This changes the way the layout is zoomed/scaled on mobile browsers. You can look at what I found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag . This example shows the problem you seem to be having. The "viewport" tag works in all mobile browsers, as far as I know, but you should check different browsers on the phone if this doesn't help you.
I had the same right-side white problem when all widths were working correctly, and solved it by turning off overflow in CSS as follows... This might hide actual content so you will have to test per your situation/layout...
html { overflow-x: hidden; }
I am trying to get a mobile site to behave. I am using the viewport meta tag to make the site fit all screens and be scalable. I have made all table and all images (over 200 px wide) 100% width, have set the viewport tag to:
content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes"
because I want it to be able to zoom in for those needing to read the text, yet have it open initially to fitting centered on the screen (any screen).
It almost fits on iphones and androids in portrait (testing on iphone 4 & 5 as well as galaxy iii android). But part of it is still not visible on the right? It fits fine on ipads or in landscape mode on phones. This is driving me insane, and must be something simple I am over looking. Live view is: password-reset.com/mobileusers/
I am using jquery colorbox on the page - could that be interfering? I thought colorbox was responsive?
Any help or suggestions will be gratefully accepted - what do I need to post of the code?
Your table that holds the More Info, Purchase and Testimonials has a width="340" on it. That is what is messing everything up.