I would like to create web page which has to compatible on iPhone..
i want to know how to design the web page for iphone.
Pls provide me the sample html code for a web page . i mean i would like to know how much should be the screen size of the web page etc...
Kindly guide me on this
Thanks for any help.
UPDATE1
can you give me a sample html code ( layout) which can run on iphone browser
Sample HTML template that will run perfectly on an iPhone:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello world</p>
</body>
<html>
Related
I have applied for Google AdSense for my website gulzari.in. I added the AdSense code between the <head> and </head> tags of .ejs file. After two weeks, I am getting the error "Connect your site to AdSense" even though I added the AdSense code between <head> and </head> tags of .ejs file.
I created the website using node js, express, MongoDB, .ejs, CSS and javascript.
Please help me! Where I am going wrong? Can I add Google Adsense code between the <head> and </head> in the .ejs file (https://ejs.co/) file? If not, what should I do to connect AdSense to my website created using nodejs, express, MongoDB, EJS, CSS and Javascript?
I am currently integrating a HTML5 app into Facebook and testing the iFrame mechanism. I am self-hosting the game content however when I point the Facebook app system to the content, the page is not being displayed.
My hosted page is a simple Hello World app for now as illustrated below, and can be found at: https://bluebeck.space/alienz/fb/
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Alienz</title>
</head>
<body>
<div><p>Hello, World!</p></div>
</body>
</html>
The app configuration in the Facebook app developer console appears as:
I have used the following HTTPS url which has a valid SSL certificate as required:
The app page contents are empty and upon inspection of the Facebook app page DOM, it is apparent that the iframe contents have been stripped from the hosted page:
My expected result would be that the contents of the self-hosted webpage would be visible in the Facebook app page. The actual result is that the contents are empty and the DOM contains an iframe tag with empty head and body tags.
Thanks to #cbroe I was able to pin this down to an X-Frame-Options error. My solution has been to include the following php headers to the page:
<?php
header('X-Frame-Options: ALLOW-FROM https://apps.facebook.com/');
header('Content-Security-Policy: frame-ancestors https://apps.facebook.com/');
?>
I have this next code, but I cant make the icon show nor the image on the iphone render. How could I fix this problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="contruccion">
<img id="Construccion" width="801" height="601" name="Construccion" alt="propiedad de CharLi Guatemala" src="images/siteCon.png"></img>
</div>
</body>
</html>
Safari on iOS does not support the favicon.ico file. You should create a touch icon, as defined by Apple.
The easiest way to get the job done is to create a 152x152 picture named apple-touch-icon.png and placed at the root of your web site. The iOS devices will find it and use it in bookmarks and for link on homepage.
You can also use this favicon generator to create all iOS pictures and HTML declarations at once. Full disclosure: I am the author of this site.
This question is of type: What is your suggestion? If it does not respect SO guideline, I am sorry.
I am developing a RESTful application that will be available in Facebook Pages. The backend is developed in PHP using CodeIgniter with RESTful library for it.
The frontend is developed using BrunchIO in CoffeeScript.
The starting point of the application is home.php, a CodeIgniter controller, which loads a view looking like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>fBoutik - Shop</title>
<meta name="viewport" content="width=device-width">
<script>
require('initialise');
</script>
</head>
<body>
</body>
</html>
(Left out other data).
When initialise file is loaded, some stuff is executed. including initialising a User Marionette (Backbone) model.
A users logs in with Facebook on the frontend and a POST is made to the server to a controller, where I set some data on SESSION.
This is a little cumbersome, because every time the app is loaded, the Facebook login dialog appears (which goes away in a moment) and a POST is made on the server.
Is there a better way to sync the user data between frontend and backend ?
If you need more details, I'll update this post.
I am developing Sencha touch application that will work on iPhone. Now application is ready and works fine in phone browser. But, now I want to distribute my application so I am using PhoneGap.
All my HTML and JavaScript pages are deployed at http://170.60.26.20:8099/Sencha/Html/index.html. Now i want to load that URL using phonegap. Suggest me the steps how could I do this.
I have installed phonegap-1.2.0-0 version.
Create new Phonegap App in xcode and you just need to modify already exist index.html file in www folder.
You can use window.location javascript method to load your web app in phone app.
In PhoneGap(Cordova).plist, add your server to the ExternalHosts list and make OpenAllWhitelistURLsInWebView to YES.
Please try following code to run your html pages in phonegap app.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LoadUrl
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
window.location="http://web.me.com/djpinter1/iPhone/jqtouch/demos/main_tabbar/#ui";
//window.location="http://170.60.26.20:8099/Sencha/Html/index.html";
}
</script>
</head>
<body onload="onBodyLoad()">
</body>
</html>
In your xcode , start a new project as phonegap project. Then copy the files from your project folder to www folder in the phonegap project.Keep in mind that index.html file should be in the parent folder , otherwise you have to change the url accordingly in the corresponding class that invokes a webview.
You can follow this link
http://wiki.phonegap.com/w/page/39991939/Getting%20Started%20with%20PhoneGap%20iOS%20using%20Xcode%204
Hope it will help