Tag: iphone

Categories
Mobile

Mobile: Targeting a page to be in a mobile screen

Here’s the live example (plagiarized from http://oreilly.com/catalog/9780596805784/):

http://onsubject.com/mobile_examples/iphone_look/

1) font-family: Helvetica; is the recommended font for simulating the iphone look and feel

2) text-shadow: 0px 1px 0px #fff; adds a little bit of a white background to the bottom of the text on the header

3) background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); Interestingly enough, the background gradient is not an image, but a gradient effect…

4) Note how the rounded corners effect is applied to the a instead of the ul, so it avoid the “square” click effect when first and last child of the list are clicked

Categories
CSS Mobile

CSS: Targeting iphone and ipad screens only

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (device-width: 768px) {
.socialIcons, a#fdbk_tab{
display: none;
}
}
Targeting only the ipad:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { }
If you are trying to target only landscape or portrait orientation, try the following:
and (orientation:landscape), like this:
@media only screen and (device-width: 768px) and (orientation:portrait){
   /* Your rules here */
}
If you are using JS to further target orientation (portrait or landscape), you can try this:
	if (window.orientation == -90 || window.orientation == 90) {
		// document.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1.0";
		total_width = 1024;
alert('Landscape' + window.orientation);
	} else { // portrait mode
		// document.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=0.7";
alert('Portrait' + window.orientation);
}
A hacky way to test for the ipad / iphone in js is to check if orientation has been set:
if(typeof(window.orientation) != "undefined") { /* Stuff that will only run on iphone / ipad */ }


Categories	

Mobile
Optimizing for mobile screens
Include the following meta tag:
<!– Mobile viewport optimized: j.mp/bplateviewport –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Another variation of this is:
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
Note that only Safari understands this meta tag. In other browsers this will be ignored.



Other small details:
Turn off telephone auto link:
<meta name=”format-detection” content=”telephone=no”>
Turn off autocorrect:
<input autocorrect=”off” autocomplete=”off” autocapitalize=”off”>