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
Related
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.
I am using mathjax for loading the mathematical function, while i am loading the html content into the UIWebView some of the content color will br changed into blue color,
But i load the same html content into the browser means, it is displaying correctly
Please share if anyone have any idea about this issue,
Thanks in Advance...
In iOS, Webkit tries to recognize phone numbers and turn them into links. I'm wondering if your stacked fractions of small integers look like phone numbers to iOS. Are the blue ones acting as links, and if so, to what?
You can disable this phone-number-recognition feature by adding
<meta name="format-detection" content="telephone=no">
to the <head> of your document. Hope that takes care of it for you.
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