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
Related
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
I am looking at calling different CSS for desktop and iPad browsers.
For desktop, I am using
<link rel="stylesheet" media="only screen and (min-width:1000px)" href="desktop.css">
and for iPad, I use
<link rel="stylesheet" media="only screen and (device-width:768px)" href="desktop.css">
When I say desktop browsers, I am referring to IE8 and above, FF4+, Safari 5+ on MAC
But for some reasons, the desktop CSS does not get applied in IE8.
Please suggest the best approach such that I can clearly separate desktop/iPad and also it would work on all desktop browsers..
#testndtv; mediaquery is not work in IE. for this you have to use Response.js
The easiest way is to add
<!--[if IE ]><link rel="stylesheet" media="screen" href="desktop.css"><![endif]--> to you <head> tag.
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
After peeking at the SO source, I noticed this tag:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Which after a quick Google revealed an Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).
The only other one that jumps to mind is the:
<input type="search" results="5"/>
(source: alexking.org)
This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.
I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
Allows you to set the width, height and scale values
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Set the status bar style, pretty self explanatory.
<meta name="apple-mobile-web-app-capable" content="yes" />
As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.
There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Thought I'd add my own answer with some new things I've seen crop up.
1.) There's an option for providing a higher definition iPhone 4 retina display icon
<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>
2.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />
3.) You can make iPhone links for phone/sms texting directly do the desired action
Call us
Text us
4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation
<script type="text/javascript">
function orient(){
switch(window.orientation){
case 0:
document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
5.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.
<link rel="stylesheet" type="text/css" href="../iphone4.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thanks to #Sarah Parmenter over on 24 ways for this added information.
A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.
The above mentioned documentation has moved. These are the new locations.
Safari HTML Reference:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari Web Content Guide:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
#scunliffe I took your orientation switch a step further:
function orient(o){
switch(o){
case -90:
case 90:
$('#container').removeClass().addClass('landscape');
break;
default:
$('#container').removeClass().addClass('portrait');
break;
}
}
It turns out, there are a lot of them!
I found this one interesting:
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won’t add any effects to the icon.
precomposed is available to iPhone OS
2.0 and later
The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).
Safari Web Content Guide