Response title
This is preview!
Why does my JQuery Mobile web app look pixelated in the iPhone retina simulator?
in jQuery Mobile
•
10 years ago
Recently started using the JQueryMobile framework to make a web app version of my site...http://aortiz.info
While things together using the IOS simulator and trying to accommodate for a retina version (iPhone version 5.0), I started noticing pixelation. See below!
I found a great tutorial about the matter and downloaded the source to test in my development environment http://aralbalkan.com/3331. That worked, so I guess it's my markup/css?
- <!DOCTYPE html>
- <html>
- <head>
- <title>welcome</title>
- <!-- w/o this tag, the browser will squeeze our layout to the page i.e. making it small-->
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- <!-- jQuery mobile, remote links -->
- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
- <!-- jQuery mobile, local links -->
- <script src="_js/jquery.mobile.structure-1.0.1.min.css"></script>
- <script src="_js/jquery.mobile-1.0.1.min.css"></script>
- <link href="_css/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css"/>
- <link href="_css/retina.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">
- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
- <!-- To use this script, it must be included before the <body> element (i.e. in the <head>) but doesn't matter if it appears before or after the CSS - but for the sake of performance, it would make better sense to include the CSS first then this script. -->
- <!--[if lt IE 9]>
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- </head>
- /* Retina */
- @media screen and (-webkit-min-device-pixel-ratio: 2.0),
- only screen and (-o-min-device-pixel-ratio: 3/2),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (min-device-pixel-ratio: 1.5) {
- div#crest {
- margin-left: auto;
- margin-right: auto;
- background:url('../_images/crestButton@2x.png')no-repeat;
- -webkit-background-size: 80px 79px;
- z-index: 1999;
- }
- body{
- border-bottom: 1px solid #c48d73;
- padding: 0;
- margin:0;
- padding:0px;
- background:url('../_images/aortiz_bg@2x.png');
- background-repeat: no-repeat;
- border: 1px solid #050201;
- width: auto;
- -webkit-background-size: 1271px 920px;
- }
- }
- @media screen and (device-width:768px) and (orientation:portrait){
- body{
- border-bottom: 1px solid #c48d73;
- padding: 0;
- margin:0;
- padding:0px;
- background:url('../_images/aortiz_bg@2x.png');
- background-repeat: no-repeat;
- border: 1px solid #050201;
- width: auto;
- -webkit-background-size: 1271px 920px;
- }
- }
- @media screen and (device-width:768px) and (orientation:landscape){
- body{
- padding: 0;
- margin:0;
- padding:0px;
- background:url('../_images/aortiz_bg@2x.png');
- background-repeat: no-repeat;
- border: 1px solid #050201;
- width: auto;
- -webkit-background-size: 1271px 920px;
- }
- }
1