I'm trying to build a portfolio website, wich works on desktop and mobile devices.
This is what i have right now: http://i305098.iris.fhict.nl/Portfolio/
The problem is on the image in the showcase section ,the image doesn't display how it should be doing. It works fine on all browsers and even in the GC emulator of iphone 5 but when I show the page on my Iphone 5 the image totally ignores any width or height given in the CSS.
You should try using PHP constraints for the image so that it resizes itself nicely, (Are you using wordpress or ?)
That would be helpful, Thanks.
Related
I built a PWA using Vue.js and https://www.pwabuilder.com/.
On IOS (Iphone 11) my app has extra margins on top and bottom that reduce the screen height, as shown on screenshot 1 below. On the Iphone 8 simulator it seems to go full-width. Probably because it is fixed ?
I thought it might be related to my JS code but debugging the app with Safari indicates that the extra margins are more likely linked to the XCode project, as they seem to apply outside my app view.
Has anyone any idea where that might come from ?
I am very unfamiliar with XCode so it might be just that my project has somewhere a max-height set.
Thanks for the help.
screenshot 1:
screenshot 2:
Anyone seeing this now and having the same error:
It was an issue of splash screens in Xcode. As some LaunchIcons were missing (typically the one from the test device) if defaulted to another smaller one and launched the app with a smaller height.
I'm not sure whats happening here. I thought this was working fine before and now when I look at it the news is displaying fine...but on iphone and maybe any mobile its only filling half the screen.
I could try to use the inspector on chrome to fix it but the site is filling the screen on desktop but still only half on the actual device. Any idea what might be the issue? I messed around with the media queries but its not helping.
The news section is working fine but the rest are only filling half the screen.
greenpointpictures.com
canvasOn a web page in a mobile web application I am developing, I have a fileinput control that is used to take a picture with a mobile device camera. The image from the camera is then drawn onto an HTML5 canvas object on the same page.
The issue I am having is that if the web application is run on an iPhone 5 running iOS 7 (in the Safari web browser), the image appears extremely distorted. Specifically, the image appears to be vertically squished when drawn on the canvas. If the same web application is run on an Android device, no distortion is seen.
In previous versions of iOS and on iOS devices prior to iPhone 5, some vertical squishing was seen (although not as bad as this), and a jquery plugin named megapixel-image.js could be used to correct the vertical squishing. This tool unfortunately is not compatible with iOS 7.
Is this related to image subsampling in Safari or something else? What can be done to correct this? I obviously cannot have my users see this distorted image. Any mobile web app developer who wants to use the camera and HTML5 canvas is going to run into this, so a solution is mandatory.
megapixel-image.js does handle this correctly. I found I was passing some parameters to the plugin incorrectly, causing it not to work. My thanks to Ray Nicholus for his assistance with this issue.
I have made a webpage using the 960 grid system. And I have made it nice and responsive, following the excellent advice found in www.alistapart.com
So when developing the CSS for my new webpage I kept checking in Dreamweaver's Multiscreen viewport testing option and found that my pages were stacking up nicely on smaller screens. No miniature text, no need for pinch and zoom.
Then when testing page live, I learn that Ipad and Iphone does not resize windows and I can only get a miniaturized version of my full screen webpage.
I am hoping there is a simple CSS way to override this, so that my webpage stacks in a responsive manner also on apple devices.
You can maybe try a fluid grid option, such as sprysoft variable grid system which is based on 960.gs, though it will still have a definite grid layout (just % based instead of px based)
Like in Firefox (Desktop version) I can take using Fireshot
and in Android mobile I can take using Dolphin Screen Cut
I already know that we take screendump using wake+home it doesn't take screencapture of whole webpage including the area under the scroll and it would be difficult to take multiple screenshots by pressing wake+home and scrolling in between but with this there will be small overlap between shots and thee combine screenshot will not be precise
Barry — Webpage screenshot does the trick. You can capture full length webpage screenshots and save them to Camera Roll or Copy to clipboard for pasting into any app that supports pasting in images.
After-all I found the solution
This app worked for me perfectly
Website Screenshot (iPhone app)
You wouldn't be able to do this in Mobile Safari.
If you're developing an application (and since this is stackoverflow I'll assume that's what you're talking about) and using a UIWebView you could do this - you would need to:
Calculate the total height of the webpage you want to capture
Use a UIWebView with the height obtained above to display your webpage at actual size
Render that UIWebView as an image in an off-screen buffer.
Webpage Capture for iPhone | iPad : https://itunes.apple.com/us/app/webpage-capture/id348797820?mt=8