Hướng dẫn css for ipad - css cho ipad

Question

Nội dung chính Show

Lời nói đầu
Thuộc tính CSS
Hỗ trợ trình duyệt
Bình luận
Để lại một câu trả lời

Đã đăng vào thg 9 12, 2019 2:45 SA 1 phút đọc 1 phút đọc

Lời nói đầu

Đã bao giờ bạn gặp những lỗi CSS chỉ xuất hiện trên Iphone mà trên các thiết bị khác lại không bị gì chưa? Mình thì rồi đó, trong lúc loay hoay để xử lý thì tình cờ mình tìm ra cách dùng CSS thôi cũng xử lý riêng được, chúng ta cùng tìm hiểu xem cách ấy như thế nào nhé ( ngoài cách sử dụng CSS ra thì chúng ta có thể sử dụng Javascript để phát hiện thiết bị IOS nữa. )

Thuộc tính CSS

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

phía trên là đoạn CSS để viết cho 2 trường hợp thiết bị IOS và thiết bị khác IOS mình sẽ giải thích đoạn css ấy như sau: Đoạn css -webkit-overflow-scrolling: touch nó sẽ chỉ hoạt động trên safari mobile còn thằng @supports nó sẽ nhận diện những thiết bị nào hỗ trợ đoạn css -webkit-overflow-scrolling: touch hoặc không (@supports not) từ đấy ta có thể css cho các thiết bị ios

Hỗ trợ trình duyệt

Hiện tại thuốc tính @supports vẫn còn hạn chế trong việc hỗ trợ các trình duyệt nên chúng ta cần cân nhắc khi sử dung, chi tiết về việc hỗ trợ của các trình duyệt chúng ta có thể xem ở bảng bên dưới

Nguồn:

Bài viết được tham khảo từ nguồn: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices

PSST! Tạo một tài khoản DigitalOcean và nhận được 200 đô la tín dụng miễn phí cho các dịch vụ và dịch vụ dựa trên đám mây.

Bình luận

Không có Biggie. Nhưng bạn đã bỏ lỡ một dấu gạch chéo đóng trên dòng bình luận thứ hai của mình.
Thanks!
Tôi rất thích nhìn thấy một bản screencast về việc thiết kế một chiếc iPad, tôi chắc chắn rằng nó giống như chiếc iPhone mà bạn đã làm nhưng vẫn còn
i’m sure it’s like the iPhone one you made but still…
CSS này cũng sẽ được sử dụng bởi * tất cả các màn hình nhỏ * - Điều này có thể không mong muốn vì thường thì các vấn đề CSS (như cố định vị trí) có thể không áp dụng cho netbook, ví dụ như trình duyệt và hệ điều hành có thể khác với iPad.
Tôi tự hỏi, tại sao thiết bị có chiều rộng = 768? Tại sao nó không bằng 1024?
- 1024px là phía dài nhất, 768px là mặt ngắn nhất, do đó bạn muốn đảm bảo CSS cũng sẽ hoạt động ở phía ngắn nhất của iPad. Nó là iPad cụ thể.
  Min Width 481px đến Max Width 1024px là do đó CSS hoạt động theo hướng tập hợp trên bất kỳ thiết bị nào giữa chiều rộng pixel iPhone và iPad trong trường hợp này.
  Hy vọng điều đó sẽ giúp.
- Nó phụ thuộc vào định hướng của thiết bị (iPad), cho dù đó là một phương pháp dọc hay ngang. Do đó, hướng dọc sẽ có chiều rộng 768 và chiều cao 1024, vì đối với chiều rộng, chiều rộng sẽ là 1024 và chiều cao 768.
@Media chỉ có màn hình và (độ rộng min-device: 481px) và (-device-width: 1024px) và (định hướng: chân dung) { / * cho bố cục chân dung chỉ * /}
/* For portrait layouts only */
}
Sẽ cung cấp cho bạn một số vấn đề với các thiết bị Android mới hơn. Nhận thấy rằng để các kiểu chân dung cho iPad không được chọn bởi thiết bị Galaxy S2 của tôi là sử dụng:
@Media chỉ có màn hình và (-width: 768px) {
}
Thay vào đó .. Tôi biết nó không thực sự là một giải pháp, nhưng nó cần được ghi nhận.

Mã này dường như không làm bất cứ điều gì cho tôi .. Tôi đang làm gì sai?

#page {
	/*standard layout*/
	margin: 2em auto;
	width: 994px;
	border:4px;
	border-style:solid;
	border-color:#ffffff;
}
@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  #page {
		display:block;
		position:absolute;
		left:50%;
		top:30px;
		margin-left:-500px;
		width: 994px;
		border:4px;
		border-style:solid;
		border-color:#ffffff;
	}
}

@Designer: Hãy thử làm điều này: #Page @Media chỉ có màn hình và. {..}
Có cách nào để kiểm tra CSS nếu bạn không có iPad không? Một cái gì đó như IE Tester cho thiết bị di động? Đã thử http://ipadpeek.com/ nhưng nó không áp dụng các kiểu.
Cảm ơn vì tiền boa trên mã đoạn trích, tôi đã không nhận ra rằng điều này thật dễ dàng. :-)
Đối với những người bạn đang cố gắng để mã trên hoạt động trên ipadpeek.com, có một vài điều bạn cần làm trước.
1. Chèn thẻ meta sau ở đầu trang HTML ngay bên dưới thẻ mở.
2. Khi bạn đã sẵn sàng để xem trang web của mình, bạn sẽ phải thay đổi độ phân giải màn hình thành 1024 × 768 và làm mới trang trình duyệt web ipadpeek.com.
- Xin lỗi cho bài đăng kép, nhưng mã thẻ không hiển thị trong bài viết trên.
  Đây là thẻ meta tôi đã đề cập đến.
@Media chỉ có màn hình và (-width: 768px) và (chiều cao thiết bị: 1024px) và (-webkit-min-device-pixel-ratio: 1) { / * Quy tắc cụ thể của iPad của bạn tại đây * /}
{
/* Your iPad specific rules here */
}
@Media chỉ có màn hình và (-width: 768px) {#background img {display: none; } / * Quy tắc cụ thể iPad của bạn tại đây * /}
{
#background img {
display: none;
}
/* Your iPad specific rules here */
}
Wow, sửa chữa nhanh chóng và dễ dàng! Cảm ơn vì đã chia sẻ kỹ thuật này, nó đã cứu tôi một cơn đau đầu lớn.
Thanks!
Thế còn iPad 3, có định nghĩa cao hơn 768px
Đã kiểm tra nó trên iPad 3, hoạt động tốt (cái này đã hoạt động:
(this one worked:
@Media chỉ có màn hình và (-width: 768px) và (thiết bị chiều cao: 1024px) và (-webkit-min-device-pixel-ratio: 1) {#background img {display: none; }}
{
#background img {
display: none;
}
}
)
- @Sirkay bạn rất tuyệt! Mã đó mà bạn cung cấp là công việc 100%. cảm ơn.
  you so cool! that code u’ve give is work 100%. thanks.
Tôi có một câu hỏi liên quan. Câu trả lời có thể liên quan đến việc sử dụng truy vấn truyền thông được mô tả trong bài đăng này (hoặc một cái gì đó khác). Nếu nội dung trang của bạn có chiều cao nhỏ hơn 1024px, thì có kỹ thuật nào để điều chỉnh chân trang sao cho nền chân trang (màu hoặc lặp lại hình ảnh) đi xuống cuối trang khi nó được xem trong chân dung trên iPad? Tôi cho rằng đây là một vấn đề tiêu chuẩn nhưng tôi đã thấy bất kỳ giải pháp nào cho nó. Tôi nghĩ rằng chân trang là div rõ ràng nhất để điều chỉnh, nhưng có thể có một số kỹ thuật hoặc div khác mà trên mạng tiết kiệm thiết kế trong trường hợp sử dụng này. Bất kỳ đề xuất sẽ được đánh giá rất cao.
Tôi có nên sử dụng
cộng với màn hình chỉ @Media và (-width: 768px) {#background img {display: none; } / * Quy tắc cụ thể iPad của bạn ở đây * /} hoặc tôi có thể làm mà không có mã này?
@media only screen and (device-width: 768px)
{
#background img {
display: none;
}
/* Your iPad specific rules here */
}
or could I do without this code?
- Vì một số lý do vì lý do này mã meta tên meta = trực tuyến trực tuyến
Ồ! Đã tìm kiếm ngày làm thế nào để khắc phục sự cố này, bây giờ mọi thứ hoạt động trên iPad mà không làm rối trang web trong các trình duyệt khác.
Thực sự cảm ơn bạn cho bài viết này!
Có ai đã kiểm tra các mẹo mã này trên điện thoại Samsung lớn hơn mới không?
Cảm ơn các bạn, vì những người muốn sử dụng nó bên trong JavaScript if (window.matchmedia (‘Chỉ có màn hình và (-width: 768px). }
if (window.matchMedia(‘only screen and (device-width: 768px)’).matches)
{
// ipad… maybe run some small-screen related dom scripting?
}
if (window.matchmedia (‘chỉ có màn hình và (width tối đa: 480px). }
{
// smartphone/iphone… maybe run some small-screen related dom scripting?
}
- Wow, tôi không bao giờ mới này. Đây là thứ tuyệt vời. Cảm ơn vì đã chia sẻ nó;)
Hoàn hảo. Đã cứu tôi rất nhiều rắc rối trong một dự án ngắn trước khi phát hành!
Safari đã bị ngưng trên Windows và công cụ kiểm tra từ xa chỉ ở phiên bản 6+ (không có sẵn cho Windows).
Bất kỳ ý tưởng làm thế nào để thiết kế một div.scroll để hiển thị thanh cuộn trên iPad. Hiện tại thủ thuật CSS này hoạt động với một cuộn hai hình, điều này tốt với tôi. Tôi thực sự muốn thanh cuộn có thể nhìn thấy trên iPad để người dùng biết rằng nội dung của họ được cuộn qua ?? Bất kỳ sự giúp đỡ sẽ rất tuyệt vời!
Thật kỳ lạ, điều này không làm việc cho tôi, tất cả.
Tiếp tục đào và tìm ra một cách đã làm, hãy nhảy điều này giúp ai đó:
@media screen and (max-width:480px) { /* Making the headings red for smartphone users */ h2 { color: red; } }
Màn hình @Media và (Min-Width: 481px) và (Max-Width: 1280px) { / * Làm cho các tiêu đề nhắm mục tiêu vào người dùng PC * / H2 {màu: màu xanh lá cây; }}
/* Making the headings Black targeting PC Users */
h2 {
color:green;
}
}
Màn hình @Media và (Min-Width: 1281px) { / * Làm cho các tiêu đề màu đỏ cho người dùng điện thoại thông minh * / h2 {color: black; }}
/* Making the headings red for smartphone users */
h2 {
color: black;
}
}
Cảm ơn vì cách nhanh chóng và dễ dàng :) đã sắp xếp vấn đề tôi đang gặp phải.
sorted the issue I was having.
Tại sao thiết bị có chiều rộng = 768? Tại sao nó không bằng 1024?
Xin lỗi các bạn, nhưng điều này không có ý nghĩa!
Có rất nhiều thiết bị mà sử dụng 480px hoặc 1024px, vì vậy CSS này ảnh hưởng đến tất cả, không chỉ các thiết bị iPad.
- Tôi hoàn toàn đồng ý với bạn. Bạn nghĩ gì về phát hiện và thêm Istablet / Ismobile / ISIPAD của thiết bị PHP trong lớp cơ thể và áp dụng kiểu CSS như thế này:
  What do you think about php device detection and adding isTablet / isMobile / isIpad … in body class and apply css style like this :
  // I use nested css rules with compass
  body.isipad {// Quy tắc cụ thể iPad của bạn ở đây
  // Your iPad specific rules here
  @Media chỉ có màn hình và (định hướng: cảnh quan) {// Quy tắc cụ thể của iPad cảnh quan của bạn tại đây}
  // Your landscape iPad specific rules here
  
  }
  @Media chỉ có màn hình và (định hướng: portait) {// Quy tắc cụ thể của iPad Portait của bạn tại đây}
  //Your portait iPad specific rules here
  
  }
  }
- Erasmussen, điều này có hoạt động ra khỏi hộp không? Và với tất cả các thiết bị iPad? Tôi chắc chắn bạn có thể thêm chi tiết cụ thể hơn vào mã của bạn. Giống như sự khác biệt trong việc giải quyết iPad 2 của iPad Retina.
  Nếu bạn biết làm thế nào tôi cho một người sẽ đánh giá cao một mã làm việc đầy đủ để tôi có thể học hỏi từ nó, bởi vì tôi đang gặp khó khăn trong việc tìm ra khả năng đáp ứng. Cảm ơn bạn.
- Ramses,
  Để phát hiện thiết bị, tôi đang sử dụng lớp PHP này: http://mobiledetect.net/ thực sự đơn giản và đầy đủ. Bạn có thể phát hiện thiết bị di động, thiết bị máy tính bảng và loại thiết bị: BlackBerry, Samsung, Asus hoặc iPad iPad.
  Tôi cho bạn xem tài liệu. Mã HTML của tôi trông giống như:
```
isiPad()) ? "isiPad" : "";
?>


....
```
  Sau đó, trong CSS, bạn có thể sử dụng mã trước đó tôi đã gửi và thêm CSS-Tricks được đưa vào đây: https://css-tricks.com/snippets/css/retina-display-media-query/:
```
//  /!\ Be careful here is SCSS code, no CSS. CSS compilation is necessary /!\

body.isIpad{
    // Your iPad specific rules here

    @media only screen and (orientation : landscape) {
        // Your landscape iPad specific rules here
    }

    @media only screen and (orientation : portait) {
        //Your portait iPad specific rules here
    }

    // Retina specific rules 
    //(please to you refer to css-tricks link for details)
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

        @media only screen and (orientation : landscape) {
            // Your landscape Retina specific rules here
        }

        @media only screen and (orientation : portait) {
            //Your portait Retina specific rules here
        }
    }
}
```
  Đây có thể không phải là cách tốt nhất để làm nhưng nó hoạt động tốt cho tôi.
Khi màn hình hiển thị của Ret Retina, tôi quyết định bỏ Fitzing xung quanh với số lượng pixel và thử thay thế theo tỷ lệ thiết bị. Tôi đã có may mắn với 3/4 (hoặc 4/3, tùy thuộc) cho iPad và cho đến nay, cho đến nay 40/71 cho iPhone của tôi (¡!)
Xin chào, vì chúng tôi đang xác định điều này cho phương tiện truyền thông, chúng tôi cũng có thể xác định bố cục trang cho kích thước phông chữ. Giống như tôi đang tìm kiếm đầu ra desine trang của tôi trong iPad, nhưng khi tôi tăng hoặc giảm kích thước phông chữ- Bố cục không hiển thị luồng nội dung theo cách thích hợp, có giải pháp nào, chúng ta có thể xác định kích thước phông chữ; Like- @ Media Màn hình nếu kích thước phông chữ: 10- 50% trang sẽ trông giống như ..
as we are defining this for media scree,
Can we define page layout for font size also.
Like my i am looking my page desine output in ipad, but when i increase or decrease the font size- the layout does not show the flow of content in proper way,
Is there any solution, that we can define for font size;
like-
@ media screen if font size: 10 – 50%
page will look like..
Xin chào tất cả mọi người, tôi không thích mã hóa nhiều, nhưng tôi đang cố gắng loại bỏ nhiều CSS được bao gồm trong HTML của mình khi được xem bởi một đại lý người dùng di động, trang web của tôi chạy theo WordPress và tôi đã cài đặt plugin wptouch cho khách truy cập di động của tôi, plugin này Vô hiệu hóa hiệu ứng của hầu hết các plugin khác được cài đặt trong chủ đề (tôi không bận tâm đến nó). Vấn đề là tôi có thể thấy CSS của tất cả các plugin đó vẫn được tải (không có ảnh hưởng đến thiết kế) làm chậm quá trình tải trên thiết bị di động. Có cách nào để tránh tải nếu tác nhân người dùng là thiết bị di động không?
Im not much into coding, but I am trying to get rid of many css included in my html when viewed by a mobile user agent, my website run under wordpress and I have installed the wptouch plugin for my mobile visitors, this plugin deactivates the effect of most of the other plugins installed in the theme (I don’t mind it). The problem is that I can see the css of all those plugins still loaded (with no effect on design) which slow down the pageloading on a mobile device. Is there a way to avoid they load if the user agent is a mobile device?
PS. Hỗ trợ từ nhóm Wptouch hút, trừ khi bạn trả tiền cho phiên bản Pro
Tôi nghĩ rằng với iPad Pro xung quanh chúng ta có thể cần một cái gì đó xảo quyệt hơn.
- Không may mắn. Tôi đã tìm thấy bất cứ điều gì. Tôi không chắc chắn nếu CSS-Tricks tìm thấy bất kỳ giải pháp nào cho định hướng cảnh quan iPad Pro.
Xin chào, tôi có một trang web làm việc và nó tuyệt vời trên iPad3 và iPhone6 của tôi. Tôi cũng có iPad 1 nhưng bất kể mã nào tôi chỉnh sửa hay sử dụng, v.v., nó sẽ luôn chỉ hiển thị giống như iPhone6 nếu tôi chuyển nó thành chân dung màn hình thậm chí không xoay. Mục tiêu chính của tôi là có chế độ xem cảnh quan iPad1 trên màn hình hiển thị giống như iPad 3 không giống iPhone. Bất kỳ sự giúp đỡ sẽ là tuyệt vời và được hoan nghênh.
I have a working site and its great on my ipad3 and iphone6.
I also have a ipad 1 but no matter what code i edit or use etc it will always only show the same as the iphone6
If i turn it to portrait the screen doesnt even rotate.
My main goal is to have the ipad1 landscape view on the screen showing the same as the ipad 3 NOT like an iphone.
Any help would be great & welcomed.
Tại sao Min-Width được đặt thành 481 nếu chiều rộng của iPad là 768 trong chân dung và 1024 về cảnh quan? Điều này có bao gồm các máy tính bảng khác hay có điều gì đó rất rõ ràng mà tôi thiếu?
Tôi đã gặp vấn đề với iPad trên cảnh quan khiến hình ảnh phóng to, hoạt động tương đối ổn trong chân dung. Tôi đã sử dụng một đạo hàm của đoạn CSS CSS của @Sirkay (cảm ơn bạn về điểm xuất phát) như sau;
@Media chỉ có màn hình và (-width: 768px) và (chiều cao thiết bị: 1024px) và (định hướng: cảnh quan) và (-webkit-min-device-pixel-ratio: 1) Bối cảnh: URL (hình ảnh URL URL) Trung tâm hàng đầu không lặp lại; Kích thước nền: Bìa; }}
{
#”page or section identifier” {
background:url(“image url”) no-repeat top center; background-size:cover;
}
}
Vấn đề là iOS có một lỗi về phong cảnh chiến đấu với câu lệnh định vị hình ảnh cố định của người Viking hoặc trên mạng, lỗi không có trong bức chân dung mặc dù nó giới thiệu một hình ảnh mà lặp lại theo chiều dọc, đó là dừng lại không gian trắng khác Do tỷ lệ, tôi đang thử nghiệm cho phép tăng cường thêm quy mô trong việc mở rộng để xem liệu nó có đánh bại điều này không.
Vấn đề duy nhất với việc xóa câu lệnh vị trí là nó giới thiệu thêm không gian trắng phía trên hình ảnh trong khi cuộn, tôi đang khám phá mã để khắc phục điều này mà tại thời điểm này là một vấn đề cuộn. Giải pháp thay thế là sử dụng màn hình hiển thị trên mạng, không có tham số nào mà đôi khi thích hợp hơn trên các màn hình nhỏ hơn để tránh quá nhiều cuộn người dùng, với chi phí thẩm mỹ.
Theo như các câu hỏi về chiều rộng tối thiểu của 768PX, iOS luôn sử dụng vấn đề này làm chiều rộng của thiết bị và không bao giờ như là 1024px, nhưng dựa vào một tuyên bố định hướng của Hồi giáo để khẳng định những gì nó nên làm với CSS.
Tôi thấy rằng kiểu dáng trong các truy vấn phương tiện này cũng áp dụng cho iPhone X
Chiều rộng so với chiều rộng thiết bị? Aren họ giống nhau?

Để lại một câu trả lời

programming css CSS only iOS Responsive media CSS Media CSS Media responsive Responsive iPad CSS Media Bootstrap

Hướng dẫn css for ipad - css cho ipad

Lời nói đầu

Thuộc tính CSS

Hỗ trợ trình duyệt

Nguồn:

Bình luận

Để lại một câu trả lời

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội