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.
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 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.
I have some jquery mouseover effects on my website that I need to disable for touch screens, however, how do I know what width of screen to disable the JQuery? At the moment I have it at less than 800px. This works on an ipad portrait but then when I turn it landscape the JQuery is activated again. I have read that Ipad landscape width is 1024px but this could also be the size of a small none touch screen. Is there a way I can specify effects for certain devices instead of screen widths ?
To achieve this you should look at working the other way and instead of disabling mouse over events for touch devices ADD the events for non-touch devices.
Add Modernizr to the project your working on (you've probably already got it in there). Once added you can include a test for "touch" by adding it as a class to the HTML element
<html class="touch">
If the device has touch capabilities then everything will remain as is, however if the device does not have touch then moderizr will covert that from touch to to no-touch
<html class="no-touch">
You can then bind your mouse events off the html element having the class of .no-touch
I've put an example of this in the code pen - http://rwd.is/VyRl37
This assumes that you're still loading the jQuery library for all devices and deciding whether to load the mouse over functions based on touch devices. If you're looking at conditionally loading jQuery itself then you should look at enquire.js to load in jQuery at a specified width.
If you want to keep jQuery for other functions on smaller devices but want to improve performance you could look at using using Zepto.js as a lightweight alternative.
Finally Response.js will also allow you to call functions at particular breakpoints but you still run into the issue of not knowing if it's touch enabled or not.
Hi sorry if this is already asked. But I looked around quite a bit.
The methods I have found for detecting if a web user is using a mobile phone don't seem very nice. They are: look at the user agent string (hackish), look for a narrow width (but what's narrow?).
Is there a direct way to see if the browser supports the <meta viewport...> directive?
I think that would be the best way.
Because that's what we want... If the browser supports viewport (i.e. is mobile) use it. Otherwise not.
Try this one:
http://detectmobilebrowser.com/
The meta viewport is seems to be implemented differently from the CSS attributes, so any solution involving reading the viewport width before specifying it may not be portable.
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.