I'm experiencing a weird issue with the mobile responsive layout of a website.
The address is https://melec.vercel.app/
On desktop using dev tools > responsive, it works correctly, also on any android device you get the correct mobile experience but in iOS devices (tested on 2 iphones) the website renders incorrectly, it seems to have the double of the actual available screen width.
For reference I'm using tailwindcss, tailwindui and nextjs.
In this image you can see the scroll bar for horizontal movement.
Here you can see how I can freely move horizontally, this doesn't happen on dev tools or android devices.
Also when I press the mobile burger the whole layout shrinks a bit.
it is because the top part "flex-shrink-0 flex items-center".
I entered a "max-width: 100%;".
I am using ✕ on my close button. In my chrome pc it displays the size that I wanted (font-size:20px) see the image below
However in my mobile I also use chrome but the size is smaller even they are the same page and I also check the view in desktop site but still the size is small see the image below
Js fiddle example https://jsfiddle.net/reginaldt/cag7870j/
codepen link: http://codepen.io/reginaldt/pen/yaJqyo
Any reason for this? Thanks.
UPDATE: I used samsung galaxy core prime on the mobile view to replicate the problem. But when I used samsung galaxy s6, it display the size properly.
The site in question.
I created a slider/header using Slider Revolution. I want the slider to display differently on mobile devices than on non-mobile devices (a video on non-mobile and a picture on mobile). This works perfectly until the user turns their phone sideways. This causes the slider to revert to the non-mobile version.
The simplest solution I could come up with was to make the mobile version of the slider display on tablets as well. However, I imagine this would result in the same issue if the tablet was turned sideways. Also, the client wants the desktop version to be displayed on tablets.
Please let me know if you have any solutions. Thank you!
Have you tried adjusting the cutoff points for the responsive transition? It may be that your phone in landscape mode is wider than the cutoff for tablets.
I don't know if this will work or if when the phone is in landscape it sends new resolution data to the server, but it seems worth a try.
I am taking screenshots from my iOS Simulator and trying to put them into iTunes Connect but it continues to tell me that I have the wrong size. They are the same size with the pictures that are already in iTunes Connect. What just happened?
For people who need to scale the window size of the simulator, turn off "Optimize Rendering for Window Scale". It's under "Debug" menu.
It would give you the screenshots of the device dimension.
iPhone 6.5 display screenshot specifications lists iPhone Xs Max and iPhone Xr which is misleading. You must take screenshots using the iPhone Xs Max simulator which generates a 1242x2688 image. iPhone Xr screenshots are 828x1792 and will be rejected.
"Debug > Optimize Rendering for Window Scale" does not exist in Xcode 10.2
Looks like iOS simulator started scaling screenshots. Just check its real size if you are using iOS simulator with non-100% scale.
For Xcode 11.0
Select simulator iPhone 11 ProMax
Window -> Physical size
File -> New Screen Shot
Resolution must be:
1242 x 2688 pixels (portrait)
2688 x 1242 pixels (landscape)
Above will be valid in iTunes Connect for:
6.5-inch Display
5.8-inch Display
For 5.5-inch Display and lower size use iPhone 8+ simulator
Resolutions reference
https://help.apple.com/app-store-connect/#/devd274dd925
I solved my problem this way:
I set simulator to physical size: Window > Physical Size (Shortcut:
command + 1)
I set High-Quality Graphics: Debug > Graphics Quality Override > High Quality
I used Xcode Version 11.3.1 and I make screenshots as follows:
for iPhone 6.5" Display - 1242 x 2688(portrait): simulator iPhone 11 Pro Max
for iPhone 5.5" Display - 1242 x 2208(portrait): simulator iPhone 8 Plus
for iPad Pro (3rd and 2nd generation) 12.9" Display - 2048 x 2732(portrait): simulator iPad Pro (12.9-inch) (3rd / 5th generation)
If you are using Xcode 9. Window > Zoom and take screenshot.
When using the 8Plus simulator all issues might be solved.
Give it a try.
On a 13" MBP using Xcode 11, Simulator using iPhone 11 Pro Max produced 1242 × 2688 screenshots accepted by App Store Connect for 6.5".
iPhone 11 only generated 828 × 1792.
Working for Xcode 9:
Uncheck Optimize Rendering for Window Size in the Debug menu.
Uncheck Show Device Bezels option in the Window menu.
Uncheck Physical Device option in the Window menu. (CMD + 1)
Click Zoomoption again in the Window menu. The simulator will take height equal to Mac's screen height.
In my case resolution of a screenshot is 1242 × 2208 for 5.5" Display and 2048 × 2732 for 12.9" Display(iPad).
Tested on iPhone 7 Plus, 8 Plus & iPad Pro (12.9").
I solved the problem by changing the scale of the simulator : Window -> Scale -> 100%
If you choose an other scale, the screenshots will also be scaled.
None of the above worked for me on XCode 10.2.1. The solution was to set High Quality under Debug --> Graphics Quality Override
For Xcode 12 / Simulator 12
In the Simulator, I had to choose Window > Pixel Accurate (or Command + 3).
On my mac book pro, this makes the simulator taller than the screen, making screenshots with Shift + Command + 5 impossible. Luckily, the Simulator has the Edit > Copy Screen command (or Control + Command + C), which will make a perfect copy of the simulator contents, and which includes the portion of the simulator that you can't see.
Paste the copied screen image into your preferred image editor and save as .png.
There seems to be an issue with some versions of the simulator. Simply setting "Optimize Rendering for Window Scale" as #Semloh suggested wasn't enough for me and my screenshots would be too small as I was doing this on an Macbook Air.
I was able to overcome this by turning bezels off, dragging the window to the bottom of the screen and then resizing it by dragging the top left corner to the top of the screen.
I did this this once/twice for getting iPhone screenshots and 2/3 times for getting iPad screenshots - the window would snap the the full height of the viewport but each screenshot would be successively bigger.
The size of the screenshot will max out at the appropriate size of the device.
Mine wasn't working at all uploading at App Store Connect, so I refreshed the upload page and now it works... give it a try
XCode 13.4.1:
I was trying to take screenshots for the 6.5" category ("6.5 inch (iPhone 13 Pro Max, iPhone 12 Pro Max, iPhone 11 Pro Max, iPhone 11, iPhone XS Max, iPhone XR").
I was trying in the iPhone 11 Simulator, and tried literally every different configuration available in Preferences and menu bar options. I'm using XCode 13.4.1 and many of the suggestions in this thread don't exist in this version.
I then tried again using the iPhone 13 Pro Max Simulator, and it took the correct size screenshots perfectly. So, my advice is to try another Simulator in the category you need.
I'm building an Angular/Bootstrap web app, and I'm having some curious behaviour from tablets.
I have a set of 9 pills/tabs in the content, each with col-lg-1 col-md-1 col-sm-2 col-xs-3 set in their class. So basically, they remain in a single line when on most desktop-sized screens, 2 lines on most tablet screens, and a 3x3 grid on most phone screens.
This is behaving normally when testing with Chrome, IE, and Firefox on my desktop (Windows 7), as well as on my HTC One.
However, when testing on any iOS device, Safari on my desktop, or even a Lenovo android tablet, every tab is listing vertically, no matter what screen size.
Does anyone have any ideas as to why this is occurring?
Whoops; figured it out. I was using display:inline-flex;
I guess I should really read up more on browser compatibilities...