Issue: Im trying to see what my site looks like on mobile. Chrome dev tools responsive view is showing a zoomed out version of my website instead of the correct mobile view.
I fixed this by adding:
<meta name="viewport" content="width=device-width">
To my index.ejs/html file.
Related
I am currently working on a website using WordPress with a child theme. On the product page, I am using Advanced Custom Field with lightbox for product catalogue (not a store). I am struggled to figured out why the product image & text container appear as a full width on iPad and iPhone. When I resized the desktop browser to iPad size and it show 4 columns and 2 columns on iPhone size. Any help would be appreciate!
http://kampshydrangea.com/wordpress/products/
Thanks,
C
you are using meta tag viewport (<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, minimum-scale=1">), read about it: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am playing around with the Facebook open graph.
I have added an og:image tag such that the scraper gets the image and displays it on the users timeline for my custom action.
On the activity feed that appears on the sidebar, and on the All Activity page the image is resized to 30 x 30 px which looks awful.
On the user timeline however the logo is shown sufficiently bigger that it looks good.
The logo was not designed to look good at 30 x 30 px :) For our android app for example we have a smaller icon which is much simpler.
What is one meant to do in this situation? Is there a tag (I cannot find one) which allows for an icon to be specified for the cases where a small image is needed, and to use the image in all other circumstances?
Thanks
You must make other picture on your code and rename as logo. After that you can use this code.
Note: Picture should be square in size
<meta property="og:image:type" content="image/jpeg/jpg/png">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">
I have a UIWebView that is smaller than the full screen (specifically 540x560 pixels). My issue is that my jQuery mobile content is being cut off rather than resizing as I would expect a responsive website to do. I've uploaded a sample project with the issue here. Any ideas how to fix this?
check following tag in head section of html which tells browser to make width of viewport to same as device width
<meta name="viewport" content="width=device-width, initial-scale=1">
Remove that tag will remove horizontal scroll
EDIT:
you can not remove meta tag form http://jquerymobile.com/demos/1.1.1/docs/lists/index.html so host it on local server.
Set the width and height of the viewport to whatever the height of your UIWebView. This will register the "bottom" of the browser window and should prevent your content from being cut off if it is the appropriate height.
See here: http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Ok #Kevin, only you have doing is resize your UIWebView class in KSViewController.xib. If you want to make your app a web app, only have you add your favorite framework and folder on Xcode project.
Hope this helps. :)
I've been experimenting with html5 and have nearly finished a site for a friend. I have used Paul Irish's html5 boilerplate as a template and it all works fine until I view it in the iphone. It is at this point the site left aligns itself tight to the edge. I have set the container wrapping the site to margin:0 auto as usual, but for some reason I cannot get it to stay central.
Any ideas why this might be happening?
Here is the current like to the site..
http://cynonvalleypals.co.uk.s88828.gridserver.com/
Thank you
You have set viewport via the meta tag, right?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It means iPhone will try to show your content in a 320px width viewport instead of a 980px one. Try to imagine what you will see if you open your website with a 320px width Chrome window? That's what you get in Mobile Safari.
You can debug this easily. Open a Chrome window and use developer tools to set the body's width to 320px. You will see the result. You can tune based on this setting or you can try to use other viewport setting.
try to use viewport in this way, I hope it will help you.
<meta name="viewport" content="width=1040; user-scalable=no;" />
this will fix the width to 1040 but user will not allow to zoomed. you can add user-scaleable=1 in order to to allow users to zoom content.
you try to set the width and margin-right:auto and margin-left:auto (do not use margin:auto)
Check it
How do I replicate the effect that the app launcher uses on a square .png to show my users what their icon will look like as an app badge.
NB - I want to do this in code on the iPhone, not in photoshop on my computer.
Thanks!
edit: trying to be really clear here. How do I do this with code!
I have tried creating an overlay, but the shine apple does actually brightens the top, so just putting a png over the top will not give the same effect.
Presumably the app launcher applies some CA effects - does anyone know how to duplicate them???
Create a transparent shine overlay in Photoshop on your computer and merge the two images in code.
Short of hard-coding the shine mask, or building a mini ray-tracer, that's probably the easiest way to do it.
There's even a link to a photoshop tutorial/template here:
http://www.keepthewebweird.com/iphone-icon-psd-template/
Another more simple approach is to save your icon as a 57px x 57px PNG called "icon.png" without any shine effects, then FTP it to the root folder of a web server and create a file there called icon_test.html containing the following code:
<html>
<head>
<link rel="apple-touch-icon" href="/icon.png"/>
<title>The App Name</title>
</head>
<body>
iPhone test page
</body>
</html>
Then just browse to the icon_test.html file in mobile Safari on your iPhone, tap the "+" button in the toolbar to save the page as a bookmark, tap "Add to Home Screen", and tap "Add" in the top right. You'll then see your icon appear on the home screen, complete with Apple's shine overlay.