I've created a specific style sheet for my Wordpress site for mobile devices. For some reason the screen is zoomed in at a level where the site is not viewable, and I am unable to pinch zoom out for full screen viewing.
Is there some type of meta tag I need in there for devices? Currently I have this.
<link media="only screen and (max-device-width: 480px)" href="<?php bloginfo('template_url'); ?>/css/mobile.css" type= "text/css" rel="stylesheet" />
This will allow me to edit the style sheet and it will reflect the changes on mobile. How can I get it to zoom out?
take a look at: initial-scale=1, maximum-scale=1 metatags
Related
Having read how to add a custom home screen icon for my web app, I have spent days trying to make it work and whatever I do, the Add to Home Screen process results in an icon based on the screen shot of the current web page.
I have tried using the default file names alone
I have tried using the <link rel="" href=""> definitions and the icons
I have tried putting the icons in the root directory and one level down
I have tried 57x57, 72x72 and 114x114 sized icons, with and without the sizes definition
I have tried precomposed and normal with and without the corresponding change to the rel name
But whatever I do the Add to Home Screen process on my iPhone 4 running iOS 6.3 ignores whatever icon I define and gives me a screen shot based icon. I am tearing my hair out.
How can I find what is going wrong? How do I debug this process to find what is wrong? I have mobile safari linked to safari on the desktop to see what is going on but I am none the wiser.
You might be missing some meta definitions. For example this works in our web apps. Check that the png you're using is valid image.
<!DOCTYPE html>
<head>
<link rel="apple-touch-icon" href="/img/appicon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/img/appicon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/appicon-114.png" />
<link rel="shortcut icon" href="favicon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
...
Hi so I have a media query that gets picked up by ios simulator
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="css/iphone.css">
What I would like to do is simulate this on firefox or chrome by resizing the browser, is this possible?
<link type="text/css" rel="stylesheet" href="css/iphone.css" media="all and (max-width: 480px)" />
You need to use max-width. max-device-width is the physical screen size so that won't change. See: What is the difference between max-device-width and max-width for mobile web?
However, that won't fully solve your problem for iOS because Safari reports a width (but not a device-width) of 980px by default, so pages not designed for mobile appear as a full zoomed-out page. So, you also need to add something like this to your HTML:
<meta name="viewport" content="initial-scale = 1.0">
You can find a reference from Apple on viewport settings here:
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Yes you can directly simulate this on Firefox and chrome. But Firefox doesn't support media queries below 480.
You can also check the below link for re-size in Firefox & chrome.
http://www.smashingmagazine.com/
Hope This Helps
On Apple iPhones and iPod Touches, you specify a link to an icon file like so:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
...but on this page, it recommends that you specify two different sizes of icon, one for iPhone < 4 and another for iPhone 4.
There is no documentation I can find that shows how to specify the two separate icons. Can anyone help?
There are plenty of documentation about this on Google.
Just use:
<!-- **normal** (iPhone/iPod **non retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<!-- **normal** (iPhone/iPod **retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon-72.png" sizes="72x72"/>
<!-- and **iPad** version -->
<link rel="apple-touch-icon" href="apple-touch-icon-114.png" sizes="114x114"/>
As an additional info, you can have the icon without the gloss effect if you use apple-touch-icon-precomposed instead of apple-touch-icon.
and there are several tags you can use in order to have all features of Safari Mobile like splash screen, etc
also, give this Mobile Tuts article a read and you will know almost everything you need to have a brilliant web app
I wonder if there is a way to recognize the visit from user's iphone and automatically adjust web page to fit iPhone screen size?
<?php
$isIphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($isIphone == true) { echo 'Code You Want To Execute'; }
?>
I'd say that rather than basing it on the UA, often a screen size query is better. I have used this before in my head.
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css">
<!--<![endif]-->
Yes, there is a way. User-Agent HTTP header is your friend.
You can do User-Agent detection and make changes based on seeing the "iPhone" or "iPod" string, but you can also use a meta tag that is specifically for this purpose.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Here's another good resource for information on building an iPhone-ready website.
In iPhone web applications you supposedly can define a custom splash screen that will appear while the site is loading (when loading the site from a saved bookmark icon on the home page). The point is to make the web app startup experience feel a lot more like a real iphone application.
I believe the syntax is like this:
<link rel="apple-touch-startup-image" href="/splash.png" /> (placed in the <head> section of the page).
Where splash.png is a vertically oriented 320x460 image.
I can't seem to get it work... does anybody have any tips and tricks for this?
Make sure it is 320x460 pixels.
You already said that, but that was the solution for me.
You can only set one splash screen or else it will fail. In order to select either an ipad or iphone splash screen you need a little javascript.
The ipad landscape splash screen that can be used for native apps doesn't work for web apps. Neither would a retina splash screen for the iphone4. You can only choose an ipad or an iphone sizes splash. Setting the size attribute on the link element seems to work on the ipad. But having more than one splash image link element makes the iphone fail.
The splash screen sizes must be exact. 320x460 for iphone/ipod and 1024x748 for ipad. If you need a landscape slash screen you'll need to rotate it in photoshop as there is no control during the app's relaunch.
To test it's best to try first with app cache off and throttle the bandwidth with charles proxy or something similar.
<!-- status bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- hide safari chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- iphone start up screens -->
<script type="application/javascript">
var appl = document.createElement("link");
appl.setAttribute('rel', 'apple-touch-startup-image');
if(screen.width < 321 && window.devicePixelRatio == 1) {
appl.setAttribute('href', 'img/icons/launch320x460.png'); //iphone 3Gs or below
} else if (screen.width < 321 && window.devicePixelRatio == 2) {
//setting #2x or a 640x920 image fails, just use the iphone splash screen
} else if (screen.width < 769 && Math.abs(window.orientation) != 90) {
appl.setAttribute('href', 'img/icons/launch1024x748.png'); //ipad 2 or below (portait)
} else if (screen.width < 769 && Math.abs(window.orientation) == 90) {
//landscape fails as well, use standard ipad screen
}
document.getElementsByTagName("head")[0].appendChild(appl);
</script>
<!-- iphone springboard icons -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/icons/icon57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/icon72x72.png" />
Apple doesn't have much in the way of documentation on this topic (see this URL).
A couple of things to note:
The code snippet you provided assumes your image is living at http://yourdomain.com/splash.png
This only works for iPhone OS 3.0 and later
The image must be a PNG
The image is only displayed until the page's DOM is ready
You can also use the following code to explicitly set the web app icon:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Make sure all these links come after your other stylesheets in your header.
iOS 4 does not show the splash screen if you have a notification bar at the top - e.g. when using the personal hotspot (tethering).
Every time I run into this problem it is almost always caused by calling more than one splashscreen for the same page or the splashscreen not being 320x460 pixels (exactly). This should do the trick:
<link rel="apple-touch-startup-image" href="/splash-iphone.jpg" />
But before calling the splashscreen, you should include these three lines of code as well:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
You are right, this code must be in section and the image must be 320x460 pixels, the reason why it is not working is the picture MUST be a small file like 20KB or 25KB or less.
I had the same problem, but when i reduce the file that begin to work.
cheers