1) Install it if you haven’t yet:
$npm install weinre -g
2) run it:
$ weinre -boundHost [your ip address here or localhost]
3) Put the following reference in the page you are trying to troubleshoot:
<script src=”http//[the ip address you entered]:8080/target/target-script.js#anonymous”></script>
4) Point your browser to the ip address you entered, that will give you the firebug kind of debugger:
http://[localhost or ip address]:8080/
sudo vi /private/etc/hosts
add 127…. /the/new/files/to/serve
In Lion, you can create your own (user based) apache settings at:
[your apache directory]/users/[yourusername].conf
Size (in pixels): 320 x 480
onorientationchange=”updateOrientation();”
Where updateOrientation(); is the function that will run on orientation change.
To target webkit (safari and chrome only) browsers:
@media screen and (-webkit-min-device-pixel-ratio:0) {Just be careful as it is a hack! -webkit-min-device-pixel-ratio was meant to tell you the pixel ratio of your screen, meant to discover if you were dealing with a retina display (:2). It just work because other browsers ignore it (for now), and it is true in most screens (because of the current lack of retina displays)
To target ipad / safari portrait / landscape mode:
@media only screen and (device-width: 768px) and (orientation:landscape){}
@media only screen and (device-width: 768px) and (orientation:portrait){}
Here are all the available options:
width: The viewport width.
height: The viewport height.
device-width: The rendering surface’s width (for our purposes, this is typically the screen width of a device).
device-height: The rendering surface’s height (for our purposes, this is typically the screen height of a device).
orientation: This capability checks whether a device is portrait or landscape in orientation.
aspect-ratio: The ratio of width to height based upon the viewport width and height.
A 16:9 widescreen display can be written as aspect-ratio: 16/9.
device-aspect-ratio: This capability is similar to aspect-ratio but is based upon the width and height of the device rendering surface, rather than viewport.
color: The number of bits per color component. For example, min-color: 16 will check that the device has 16-bit color.
color-index: The number of entries in the color lookup table of the device. Values must be numbers and cannot be negative.monochrome: This capability tests how many bits per pixel are in a monochrome frame buffer. The value would be a number (integer), for example monochrome: 2, and cannot be negative.
resolution: This capability can be used to test screen or print resolution; for example, min-resolution: 300dpi. It can also accept measurements in dots per centimetre; for example, min-resolution: 118dpcm.scan: This can be either progressive or interlace features largely particular to TVs. For example, a 720p HD TV (the p part of 720p indicates “progressive”) could be targeted with scan: progressive whilst a 1080i HD TV (the i part of 1080i indicates “interlaced”) could be targeted with scan: interlace.
grid: This capability indicates whether or not the device is grid or bitmap based.
All the above features, with the exception of scan and grid, can be prefixed with min or max to create ranges.
If you need to implement media queries in IE8- and browsers that don’t support it, you can do:
https://github.com/scottjehl/Respond
Media queries for all (screens), not only ipad:
@media screen and (min-width: 1000px) and (max-width: 1040px){
// Targeting widths between 1000px and 1040px
}
/* Generic media queries */
@media screen and ( max-width: 800px ) {
}
@media screen and ( min-width: 801px ) and ( max-width: 1024px ) {
}
@media screen and ( min-width: 1025px ) {
}Media queries specific for certain mobile devices:
/** iphone **/
@media screen and (-webkit-max-device-pixel-ratio : 1.5) and (max-device-width: 480px){
}
/** iphone 4 **/
@media screen and (-webkit-min-device-pixel-ratio:2) {
}
/** ipad **/
@media screen and (min-device-width: 768px){
}
Target IE9 and IE10:
@media screen and (min-width:0 ) {
body { background: yellow; }
}Some measurements to take into account:
Ipad’s portrait width: 768px
Default viewport with (if viewport not specified): 980px (meaning pages are zoom out until 980px of content are visible). Basically, when a page is displayed in IOS / Safari combination, the page is printed into a 980px canvas, and then that canvas is squeezed down to fit the viewport area, all this by default.
To avoid the 980px default, you usually do the following:
And then, with media queries, reduce the size of your site (if it exceeds 768px):
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
}
Alternatively, the things you can do to develop a website for the ipad:
1) design your site to be 980px wide or less, then it will look good without anything else needed, but small. It will also not zoom content out of the screen.
2) use metatags:
<meta name="viewport" content="width=device-width" />
This one supposedly matches the content to the available screen size (in portrait mode).
If you rotate at this point, the content is scaled up to fit the screen.
If your site does not exactly match the screen size of the ipad, you can specify the number
pixels to display as well:
<meta name="viewport" content="width=800" />
If all fails, you can always try to use media queries to do the job:
Note that when changing orientation back and forth, sometimes the content doesn’t get scaled back to the proper size, it doesn’t seem to be a definite solution for this:
http://stackoverflow.com/questions/2581957/iphone-safari-does-not-auto-scale-back-down-on-portrait-landscape-portrait
Here are some examples on how to adjust viewports