So my website sizes correctly on a laptop PC running Windows 7. Howevever, when run on a iPhone or iPad, a couple things happen. Here's a link to my site to see www.mazzoreporting.com
First, the video in the right column extends beyond the main content box. I don't want to change the width because it makes it smaller on laptop pcs. I believe there is some kind of code I can write in my CSS to fix this?
That's it for now. Any help would be greatly appreciated.
Thanks
Chris
you need to make an separate css and load it in case you detect an ipod/iphone/ipad/ other mobile device or better if you can do an excluve mobile version of you page
There is a "secret" HTML incantation that you need to add to the web page to get WebView to resize it. I think that it is:
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=yes" />
(Within the <head> section.)
Related
http://hycroft.com/concierge.html
The text appears quite large at the bottom of the page when viewing it on my iPhone, and I'm really not sure why?
I definitely need to get this resolved as quickly as possible though as my client noticed - and doesn't like!
Thank you VERY much in advance to anyone who can shine some light on this!!
You probably need some meta tags and content that does not have to be a static size. This is an example of one of the many viewport/meta tags you can use in your <head></head> to make a website look good on an iPhone:
<meta name="viewport" content = "width = device-width, initial-scale = 2.3, minimum-scale = 1, maximum-scale = 5" />
But the best thing to do is to check out the Apple documentation:
Optimizing for Safari on iPhone
I have a website based on jQuery Mobile.
I'm using the viewport tag to fit my site to screen size.
So far so good.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
But the Problem is now, that I'm still able to scroll my whole site (the whole mobile safari browser) around the screen.
I tried to set
body {
overflow:hidden;
}
like described in other posts here. But it does not work for me. Anyone an idea how to fix that?
I had the same problem, and ended up using this workaround:
document.ontouchmove = function(event) {
event.preventDefault();
};
Well zooming and scrolling doesn't always have to be related. Your problem here is not with the viewport but with the actual width of your site, if the size is wider than the screen size you will have scrolling issues. You would have to give us a live example so we can help you to find the elements that are overflowing your layout
I compared your site with one of our own. You're using jQuery Mobile 1.0RC1 and we're using 1.0b3. The problem occurs with your site but not with ours.
Maybe try upgrading to the latest jQuery Mobile?
As Jasper pointed out, you have a 404 while trying to fetch these:
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/img/cursors/grab.png (image)
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL2/wp_properties.css?ver=1.13 (page)
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/js/jquery-1.6.2.min.js (jQuery Library)
You look like you have a space in a folder name "jquerymobile-FDL 2", I would rename this without the space.
Also I'm not sure if you can have a meta tag inside the title or style tags, maybe move all meta tags to the start pf your head tag?
http://www.w3schools.com/html5/tag_meta.asp
Also you seem to be importing two different versions of jQuery
http://code.jquery.com/jquery-1.5.2.min.js?ver=3.2.1
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/js/jquery-1.6.2.min.js
On the iPhone I'm using a UIWebView to display some content that is stored on the device so my content can be viewed on the device when there is no internet connection. I'm using the jQuery and mobile stuff in an attempt to create web apps and mobile apps that use one code base.
When I include:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
everything works fine, the sprites that make up the back button, home icon etc. all work fine. When I include the above as a local resource such as:
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
The sprites do not display, I just get a dark circle where the sprite should appear. All the other attributes defined in the css work fine, just not the sprites. If I misname the local resource, everything is messed up, so I know the css as a local resource is being included, but it is being handled differently as a local resource vs a remote resource. It even works if I hit the local dev box running apache... so it must have something to do with how the web server is serving the page vs. including it as a file......
I played around with loading the same page twice with separate UIWebViews in an attempt to see if there is some timing issue... since a local resource would load much quicker than a remote resource. The second instance of the UIWebView loaded it correctly. Is there a $.mobile command I can call to refresh the page, or for the library to do it's magic?
any ideas?
thanks for any help
Question was answered in the jQuery forum. Funny, the answer was related to my comments above, and I still didn't think to look at the image files! palm2forehead
had to go in the jquery mobile css file and remove the references to the "images" directory. IOS doesn't handle directories like normal systems so once I did that all was ok.
It did not solve my issue chaning the path.
I had to look up in the mobile.css, i found that the icon were first set with an image, an then moved with classes, i had to set the the full background property on the classes that moved the background image.
Like so:
.ui-icon-plus {
background:#9c9c9c url(icons-18-white.png) no-repeat 0 50%; }
Old way were:
.ui-icon-plus {
background-position:-0 50%;}
Put everything (js,css) to www folder along with index.html file, and include file like this <script src="jquery-mobile-min.js">`, it has solved my problem.
So I'm creating an app which basically is a UIWebView that loads an HTML page, which should have images on it. The HTML page is loading fine (confirmed with a little text on the page), but then I have this code in it:
<img src="images/image_1.png">
test
Check this out:
The tag has a broken image link
But, when I tap on the link, the
image loads!
How is this happening? What kind of solution is there?
I have the images in a subfolder of resources, which I added by "Create Folder References."
Help? A note: This is on iPad, using 4.2. But that shouldn't matter, right Apple? (Also, changing it to xml <img /> type tag doesn't do anything)
The image was way too big - over 2500px wide. Resizing to 1024px fixed it. Thanks Jose Vega.
Also, Automator is a gift from the Gods when it comes to batch operations.
OK, I'm having some issues with my site's mobile stylesheet on the iphone. I reworked the stylesheet to be similar to what http://m.facebook.com give the browser, only I'm getting an issue where the Safari on iPhone browser is still zooming the page out from like 960px, instead of constraining it to the native screen resolution. What gives?
Do you think it has to do with my .container960 class on the body element? I tried reseting those styles with the mobile stylesheet, but maybe it's not reseting the container styles properly.
The site is http://beta.cureinternational.org. You'll need to use username Guest and password guest to view the page.
Have you tried adding a meta-tag like this?
<meta name = "viewport" content = "width = device-width">
Or hard-coding in the dimensions yourself (see Viewport in https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)