I want to be able to have different images of the shared link preview especially with WhatsApp's want a full-width image like the one of youtube
I tried images with different dimensions. But not working.
<meta property="og:image" content="Https://linearc.top/image1. Jpg">
<meta property="og:image" content="Https://linearc.top/image2. Jpg">
<meta property="og:image" content="Https://linearc.top/image3. Jpg">
I want to be able to have something like this
I instead of
Related
I'm using bootstrap to make a web site. On the browse everything is ok, but on the mobile(Iphone 5c) the carousel grows and shrinks. I tryed to fix the size of the carousel on many sizes like 320px, 480px, etc and add .img-responsive class.
Did you set <meta name="viewport" content="width=device-width, initial-scale=1"> inside of the <head> tag in your html?
You need to do the pevious to ensure proper zooming on mobile devices.
Source
I've developing a store on eBay and having trouble with it on iPhones...
It seems to be nicely responsive in a normal browser, but when I view it on an iPhone it only takes up about half of the screen...
Is there something I'm missing?
The URL is http://stores.ebay.co.uk/the-biggest-toy-store
I've added a viewport tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Thanks!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
in your index.html page and it should work
A few things I noticed in your site, remove the min-width: 760px from your .stBadge (in your media query only). That will help get the footer within the screen boundary. There is also some kind of border up top that has a wider-than-screen width, possible the #gh-top div... but that may be fixed once the other is.
I want to make a simple webpage with a JavaScript game look like an app on the iPhone. I know I can save a bookmark to the homescreen and that looks like an app and I know I can set the apple-itouch-image for the thumbnail in my HTML. But when you click on the app on the homescreen, it's clear this is just a webpage. How can I get rid of the URL and search bar at the top like Google Reader does? It's fine to see that bar if you later scroll up.
Is it possible to dive right into full-screen mode when the webpage is clicked?
I'm not looking for anything like PhoneGap, I just want to make a simple webpage with JavaScript look like an app, I don't want it to actually be an app.
You can put some meta tags in your head block of the page. Try these:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
viewport sets width and controls scaling and zooming.
apple-mobile-web-app-capable informs the Apple iOS that the application can be installed to the users springboard so that it starts the Safari Mobile browser without a menu bar
apple-mobile-web-app-status-bar-style controls the look of the thin status bar at the top of the screen.
Another useful line is:
<link rel="apple-touch-icon-precomposed" href="myicon.png"/>
Which will give the app a custom icon once installed.
You need to define a few <meta> tags, most notably apple-mobile-web-app-capable. See a full tutorial here http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/
Add
<meta name="apple-mobile-web-app-capable" content="yes" />
Then it should work after it was saved to homescreen.
I'm having a problem where the image that is pulled through to the user's wall after they click the like button is cropped. See link for image:
http://imageshack.us/photo/my-images/36/fblikeimage.jpg/
Here is my iFrame code:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fmysite.org&send=false&layout=box_count&width=450&show_faces=false&action=recommend&colorscheme=light&font&height=90&appId=1234"
width="320" height="60"></iframe>
Here are my OG tags:
<meta content="123456879" property="fb:app_id">
<meta content="sch_donations:donate" property="og:type">
<meta content="https://mysite.org/?utm_source=internal&utm_medium=social&utm_content=recommend-on-facebook&utm_campaign=WTH-FB" property="og:url">
<meta content="Title text" property="og:title">
<meta content="Description text" property="og:description">
<meta content="https://mysite.org/image.jpg" property="og:image">
<meta content="https://mysite.org/?utm_source=internal&utm_medium=social&utm_content=recommend-on-facebook&utm_campaign=WTH-FB" property="sch_donations:link">
I wondered if anyone else has come across this problem? Can you see anything in my code that might cause this?
I think the image is the problem... What are its original dimensions? Fb tends to crop it like that if an image doesn't have its height and width equal...
how can I get my fixed width site to always appear "fully zoomed in" on webkit (iphone and android) browsers?
right now, it looks fine on an iPhone and "too small/zoomed out" on an Android phones that have higher resolution.
i'm trying this viewport:
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densityDpi=device-dpi, initial-scale=1.0" />
The following worked for me. The page gets scaled down for medium and low density devices. Android 2.2 has some issues with handling meta tags.
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi" />
Try changing the "initial-scale=x.x" number until it looks right:
<meta name="viewport" content="user-scalable=yes, target-densityDpi=device-dpi, initial-scale=1.6" />