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.
Related
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
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 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.
So I am creating my first webpage catered to mobile browsers. What are some things to consider?
How do I get the resolution right for different devices (Blackberries, iPhones, iPads, etc.)? Is there a common method that people are using? Some sort of framework?
How do I prevent zooming (on most touch screen phones, you can zoom in by pinching)?
What are some other things to keep in mind?
There are a ton of good practices to follow. Here are a few:
make the content shorter and easier to read. People can only scroll so much and read so much on a smaller screen size.
develop all your content in one single column. Make the width flexible (100% or close to it) so that it expands to fill the screen Do not make people horizontally scroll the page.
do not use a lot of a) scripts, b) css stylesheets, c) images. These require lots of downloading and will increase the page load time and the cost for the user (as most people on mobile pay per KB for Web browsing). Consolidate / gzip your files.
in your css, add extra line-height for easier reading.
in your css, add extra letter-spacing between numbers in phone numbers, for easier reading.
retain a link back to the full site, for those who want the full content.
include a back to top link at the bottom of the page, so users do not have to scroll all the way back up.
add padding to a hrefs so that it is easier to click/touch a link.
use HTML5 form types so that modern browsers will use the appropriate keyboards... http://diveintohtml5.ep.io/forms.html
Just create normal web pages with liquid layout and let the browser take care of choosing an appropriate width.
If you know your pages will scale down nicely to mobile screen sizes, give the browser a clue that it can show the pages 1:1 without zooming by default. Include in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
I would strongly recommend not attempting to disable zooming (user-scalable=no) as it's a useful feature that you gain nothing by blocking.