ارجوكم مساعده لدي مشكله في صفحه بسيطه بواسطة html , css

المبرمج محمد · 7 فبراير

صممت صفحه بسيطه بواسطة html , css تعمل جيد جدا في هواتف الاندرويد و الويندوز ولاكن الاهمالمشكله تظهر في متصفحات ios عند فتح الصفحه من ios تظهر بشكل مختلف تماما ولاكان انه تم حذف الاكواد لا اعرف لماذا مع ان الاتنين متصفحات جوجل كروم اقصد اني استخدم جوجل كروم علي ابل و اندرويد ولاكن النتيجه مختلفه علي ابل الصوره ستوضح المشكله

الصوره الاولي لنسخة ios
النسخه الثانيه للاندرويد
كود html

<!DOCTYPE html>
<html lang="ar">
{{-- // 720 --}}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Friends</title>
    <link rel="stylesheet" href="{{ URL::asset('css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('css/main.css') }}">
  
</head>

<body>
    <div class="fixed-bottom floating-button bg-priamry">
        <a href="javascript:void(0);" onclick="window.print();">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
            </svg>
        </a>
    </div>

    <div class="container">
        <div class="row align-items-center">
            <div class="xmarg"></div>
            <div class="col-lg-5 col-12 my-3">
                {!! $qrQode !!}
            </div>
            <div class="col-lg-7 col-12 image-container text-center">
                <a href="#" class="xog">
                    <img src="{{ URL::asset('logo_l.png') }}" alt="logo(wasal)">
                </a>
            </div>
        </div>

        <div class="container trip-info mt-4">

            <div class="allocate">
                <span class="taken-no">رقم الحجز</span>
                <input class="taken-value" type="text" name="taken-value" placeholder="244"
                    value="{{ $data['clientData']['reservationNumber'] }}">
            </div>
            {{-- $data['userData'] --}}

            <div class="passngers">
                <span class="passngers-span">كشف الركاب</span>
            </div>
            <div class="datex">
                <div class="day">
                    <span class="taken-no">اليوم</span>
                    <input class="taken-value" type="text" name="taken-value"
                        placeholder="{{ \Carbon\Carbon::now()->locale('ar')->dayName }}">
                </div>

                <div class="xmarg"></div>
                <div class="date">
                    <span class="taken-no">التاريخ</span>
                    <input class="taken-value" type="text" name="taken-value"
                        placeholder="{{ now()->format('d/m/Y') }}">
                </div>
            </div>

        </div>
    </div>

    {{-- ===============> {{ $data }} --}}


    <div class="container m-auto row">
        {{-- <div class="col-12 driver-info">
            <h3 class="text-center">بيانات السائق</h3>
            <div class="table-responsive">
                <table class="table table-bordered main-table text-center">
                    <tr>
                        <td>اسم السائق</td>
                        <td>رقم الهوية</td>
                        <td>رقم الجوال</td>
                        <td>نوع السيارة</td>
                        <td>رقم اللوحة</td>





                    </tr>

                    <tr>
                        <td>{{ $data['userData']['driversName'] }}</td>
                        <td>{{ $data['userData']['driversID'] }}</td>
                        <td>{{ $data['userData']['driversCellPhone'] }}</td>
                        <td>{{ $data['userData']['typeOfCar'] }}</td>
                        <td>{{ $data['userData']['carNumber'] }}</td>
                    </tr>
                </table>
            </div>
        </div> --}}



        <div class="col-12 client-info">
            <h3 class="text-center">بيانات السائق</h3>

            <div class="table-responsive">
                <table class="table table-bordered main-table text-center customer-details">

                    <tr>
                        <td>اسم السائق</td>
                        <td>رقم الهوية</td>
                        <td>رقم الجوال</td>
                        <td>نوع السيارة</td>
                        <td>رقم اللوحة</td>
                    </tr>
                    <tr>
                        <td>{{ $data['userData']['driversName'] }}</td>
                        <td>{{ $data['userData']['driversID'] }}</td>
                        <td>{{ $data['userData']['driversCellPhone'] }}</td>
                        <td>{{ $data['userData']['typeOfCar'] }}</td>
                        <td>{{ $data['userData']['carNumber'] }}</td>
                    </tr>
                </table>
            </div>
        </div>







        <div class="col-12 client-info">
            <h3 class="text-center">بيانات العميل</h3>
            <div class="table-responsive">
                <table class="table table-bordered main-table text-center customer-details">
                    <tr>
                        <th style="background-color: rgba(192,192,192,255);">اسم العميل</th>
                        <td style="background-color: rgba(192,192,192,255);" colspan="2">
                            {{ $data['clientData']['customerName'] }}</td>
                        {{-- <td style="background-color: rgba(192,192,192,255);">رقم العميل</td> --}}
                        <td style="background-color: rgba(192,192,192,255);" colspan="3">
                            {{-- {{ $data['clientData']['customerMobileNumber'] }} --}}
                        </td>
                    </tr>
                    <tr>
                        <td>جهة القدوم</td>
                        {{-- <td>الرحلة</td> --}}
                        <td>جهة الوصول</td>
                        {{-- <td>جهة المغادرة</td> --}}
                        <td>رقم العميل</td>
                        <td colspan="1">الرحلة</td>
                        {{-- <td>رقم رحلة المغادرة</td> --}}
                        <td colspan="1" class="">ملاحظات</td>
                        {{-- <td>ساعة المغادرة</td> --}}
                    </tr>
                    <tr>
                        <td>{{ $data['clientData']['destinationArrival'] }}</td>
                        <td>{{ $data['clientData']['destination'] }}</td>
                        <td>{{ $data['clientData']['customerMobileNumber'] }}</td>
                        <td>{{ $data['clientData']['flight'] }}</td>
                        <td>{{ $data['clientData']['note'] }}</td>
                    </tr>
                </table>
            </div>
        </div>
        {{-- <div class="col-lg-5 col"> --}}


        {{-- <div class="client-info">
                <h6 class="text-right">بيانات المرافقين</h6>
                <div class="table-responsive">
                    <table class="table table-bordered main-table text-center">
                        <tr>
                            <th style="background-color: rgb(177, 172, 172);">#</th>
                            <td style="background-color: rgba(192,192,192,255);">اسم المرافق</td>
                            <td style="background-color: rgba(192,192,192,255);">الجنسية</td>
                            <td style="background-color: rgba(192,192,192,255);">رقم الجواز / الهويه</td>
                        </tr>

                        @foreach ($data['morafksData'] as $index => $morafk)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $morafk['passengerName'] }}</td>
                                <td>{{ $morafk['nationality'] }}</td>
                                <td>{{ $morafk['identity'] }}</td>
                            </tr>
                        @endforeach


                    </table>
                </div>

            </div> --}}
        <div class="col-12 client-info">
            <div class="test">
                <div class="table-responsive">
                    <h3 class="text-center" style="margin-right: 160px">بيانات المرافقين</h3>
                    <table class="table table-bordered main-table text-center customer-details">
                        <tr>
                            <th style="background-color: rgb(177, 172, 172); width: 5%;">#</th>
                            <td style="background-color: rgba(192,192,192,255); width: 32%;">اسم
                                المرافق</td>

                            <td style="background-color: rgba(192,192,192,255); width: 30%;">الجنسية</td>
                            <td style="background-color: rgba(192,192,192,255); width: 30%;">الجواز / الهويه</td>
                        </tr>

                        @foreach ($data['morafksData'] as $index => $morafk)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td style="white-space: nowrap;">{{ $morafk['passengerName'] }}</td>
                                <td>{{ $morafk['nationality'] }}</td>
                                <td>{{ $morafk['identity'] }}</td>
                            </tr>
                        @endforeach
                    </table>
                </div>


            </div>

        </div>




        {{-- </div> --}}
        <div class="row">
            <div class="col-lg-6">
                <div class="text">
                    <h4>*** ملاحظة هامة ***</h4>
                    <p>في حالة عدم تطابق بيانات الضيف مع الاثبات تكن عرضة للجزاء وهذاء تعهد منا بذلك</p>
                    <p>شاكرين لكم حسن تعاونكم معنا</p>
                </div>
            </div>
            <div class="col-lg-6 text-start logo-footer">
                <img src="{{ URL::asset('ll.png') }}" style="width: 250px margin-top: 70px;" class="img-fluid"
                    alt="logo(wasal)"></a>
            </div>
        </div>

    </div>

</body>
<script>
    // استدعاء دالة window.print() عند تحميل الصفحة
    window.onload = function() {
        window.print();
    }
    if (window.flutter_inappwebview) {
        // Send a message to the Flutter side
        window.flutter_inappwebview.callHandler('printPage');
    }
    if (window.flutter_inappwebview) {
        window.flutter_inappwebview.callHandler('printPage', 'your arguments here').then(function(result) {
            // You can optionally handle a response back from Flutter here
        });
    }
</script>

</html>

كود css

body {
  direction: rtl;
}

.upper-part {
  display: flex;
  justify-content: space-between;
}

.logo-barcode {
  margin-top: 10px;
}

.logo-barcode a {
  background-color: white;
  text-decoration: none;
}

.logo-barcode img {
  width: 100px;
  height: 100px;
}

.driver-info {
  /* margin: 20px; */
}

.trip-info {
  display: flex;
  justify-content: space-between;
}


.trip-info div span {
  color: rgb(255, 165, 0);
  background-color: black;
  opacity: 0.8;
  border-radius: 5px;
  padding: 5px 4px;
  text-align: center;
  font-size: 17px;
  width: 95px;
  display: inline-block;
}

.passngers-span {
  padding: 15px 30px;
}

.trip-info div input {
  max-width: 110px;
  padding: 3px;
  font-size: 17px;
  border-radius: 5px;
  outline: none;
  margin: 0px 5px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .passngers {
    margin-top: 4px;
  }

  .passngers-span {
    padding: 10px;
  }

  .taken-value {
    max-width: 100px;
  }

  .allocate, .date {
    display: flex;
    flex-direction: column;
    width: 30%;
  }

  .trip-info div span {
    margin-bottom: 3px;
  }
}

Friends (3).pdf dd.pdf

تم التعديل في 7 فبراير بواسطة المبرمج محمد

Mustafa Mahmoud7 · 7 فبراير

ربما يتم تشغيل في ios على نسخة قديمة من متصفح جوجل كروم لا تدعم خواص css الجديدة
1 - تحديث المتصفح فى الios
2 - اضافة الprefix لخواص css الجديدة
تتم كالأتى

display: flex;

تصبح

display: -webkit-flex;

وهذا لكل الخواص الجديدة لcss
وهذ أكواد الcss الخاصة بك بعد التعديل

body {
  direction: rtl;
}

.upper-part {
  display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* IE 10 */
  display: -webkit-flex; /* Chrome */
  display: flex;
  justify-content: space-between;
}

.logo-barcode {
  margin-top: 10px;
}

.logo-barcode a {
  background-color: white;
  text-decoration: none;
}

.logo-barcode img {
  width: 100px;
  height: 100px;
}

.driver-info {
  /* margin: 20px; */
}

.trip-info {
  display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* IE 10 */
  display: -webkit-flex; /* Chrome */
  display: flex;
  justify-content: space-between;
}


.trip-info div span {
  color: rgb(255, 165, 0);
  background-color: black;
  opacity: 0.8;
  border-radius: 5px;
  padding: 5px 4px;
  text-align: center;
  font-size: 17px;
  width: 95px;
  display: inline-block;
}

.passngers-span {
  padding: 15px 30px;
}

.trip-info div input {
  max-width: 110px;
  padding: 3px;
  font-size: 17px;
  border-radius: 5px;
  outline: none;
  margin: 0px 5px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .passngers {
    margin-top: 4px;
  }

  .passngers-span {
    padding: 10px;
  }

  .taken-value {
    max-width: 100px;
  }

  .allocate, .date {
    display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* IE 10 */
    display: -webkit-flex; /* Chrome */
    display: flex;
    flex-direction: column;
    width: 30%;
  }

  .trip-info div span {
    margin-bottom: 3px;
  }
}

تم التعديل في 7 فبراير بواسطة Mustafa Mahmoud7

ارجوكم مساعده لدي مشكله في صفحه بسيطه بواسطة html , css

السؤال

المبرمج محمد

1 جواب على هذا السؤال

Recommended Posts

Mustafa Mahmoud7

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية